CSS写一个旋转的正方体

绿色的是不旋转的,红色的是可以旋转的

介绍一个网站,写动画的网站

提前找到符合需求的动画,打开控制台,复制他的代码就行。方便又好用

https://animista.net/

代码是React的,请自行转换

绿色正方体的代码

html 复制代码
<div className={styles.cubeNormal}>
 <div className={styles.side + ' ' + styles.front}></div>
 <div className={styles.side + ' ' + styles.back}></div>
 <div className={styles.side + ' ' + styles.right}></div>
 <div className={styles.side + ' ' + styles.left}></div>
 <div className={styles.side + ' ' + styles.top}></div>
 <div className={styles.side + ' ' + styles.bottom}></div>
</div>
css 复制代码
.cubeNormal {
  position: relative;
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
  .side {
    position: absolute;
    width: 36px;
    height: 40px;
    background: rgba(8, 241, 19, 0.6);
    border: 1px solid rgba(219, 215, 227, 0.5);
  }
  .front {
    transform: translateZ(18px);
  }
  .back {
    transform: translateZ(-18px);
  }
  .right {
    transform: rotateY(-90deg) translateZ(18px);
  }
  .left {
    transform: rotateY(-90deg) translateZ(-18px);
  }
  .top {
    transform: rotateX(90deg) translateZ(18px);
  }
  .bottom {
    transform: rotateX(90deg) translateZ(-18px);
  }
}

红色旋转体的代码

html 复制代码
<div className={styles.cube}>
 <div className={styles.face + ' ' + styles.front}>
   <img src={item?.value === 1 ? alarmViewImgList[0] : alarmViewImgList[1]} alt="" width={42} />
 </div>
 <div className={styles.face + ' ' + styles.back}>
    <img src={item?.value === 1 ? alarmViewImgList[0] : alarmViewImgList[1]} alt="" width={42} />
</div>
  <div className={styles.face + ' ' + styles.right}>
     <img src={item?.value === 1 ? alarmViewImgList[0] : alarmViewImgList[1]} alt="" width={42} />
 </div>
<div className={styles.face + ' ' + styles.left}>
  <img src={item?.value === 1 ? alarmViewImgList[0] : alarmViewImgList[1]} alt="" width={42} />
  </div>
<div className={styles.face + ' ' + styles.top}>
<img src={item?.value === 1 ? alarmViewImgList[0] : alarmViewImgList[1]} alt="" width={42} />
  </div>
  <div className={styles.face + ' ' + styles.bottom}>
<img src={item?.value === 1 ? alarmViewImgList[0] : alarmViewImgList[1]} alt="" width={42} />
 </div>
</div>

background-image 这个属性代码就是颜色设置,如果用图片的话可以删除,如果要使用颜色的话,设置这个属性。

css 复制代码
.cube {
  position: relative;
  width: 44px;
  height: 40px;
  transform-style: preserve-3d;
  transform: translateZ(-70px) rotateX(50deg);
  animation: rotate-90-vertical-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
  .face {
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
  }
  .front {
    transform: rotateY(0deg) translateZ(22px);
    background-image: radial-gradient(rgba(255, 255, 0, 0.5), rgba(255, 0, 0, 0.83));
  }
  .back {
    transform: rotateY(0) translateZ(22px);
    background-image: radial-gradient(rgba(255, 255, 0, 0.8), rgba(255, 0, 0, 0.83));
  }
  .right {
    transform: rotateY(-90deg) translateZ(22px);
    background-image: radial-gradient(rgba(255, 255, 0, 0.8), rgba(255, 0, 0, 0.83));
  }
  .left {
    transform: rotateY(-90deg) translateZ(22px);
    background-image: radial-gradient(rgba(255, 255, 0, 0.8), rgba(255, 0, 0, 0.83));
  }
  .top {
    transform: rotateX(90deg) translateZ(22px);
    background-image: radial-gradient(rgba(255, 255, 0, 0.8), rgba(255, 0, 0, 0.83));
  }
  .bottom {
    transform: rotateX(90deg) translateZ(22px);
    background-image: radial-gradient(rgba(255, 255, 0, 0.8), rgba(255, 0, 0, 0.83));
  }
}


@keyframes rotate-90-vertical-fwd {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(90deg);
  }
}
相关推荐
_请输入用户名32 分钟前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子33 分钟前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天33 分钟前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
Thetimezipsby36 分钟前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
掘金安东尼1 小时前
前端周刊430期(2025年9月1日–9月7日)
前端
BUG创建者1 小时前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
就是帅我不改1 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
JackJiang1 小时前
转转客服IM系统的WebSocket集群架构设计和部署方案
前端
codeGoogle1 小时前
大厂研发之谜:千亿投入砸出利润大缩水
前端·人工智能·后端
菲兹园长1 小时前
CSS(展示效果)
前端·javascript·css