纯css制作旋转的立方体

思路：
首先有一个正方形，根据rotate translate属性设定好正方体六个面的位置
然后用animation动画让正方体进行360°的旋转
具体代码：

.box {
   width: 200px;
   height: 200px;
   /* border: 1px dashed red; */
   margin: 100px auto;
   position: relative;
   border-radius: 50%;
   /* 让子盒子保持3d效果*/
   transform-style: preserve-3d;
   /*transform:rotateX(30deg) rotateY(-30deg);*/
   animation: rotate 8s linear infinite;
}

.box>div {
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0.7;
}

.left {
   background-color: #afa;
   /* 变换中心*/
   transform-origin: left;
   /* 变换*/
   transform: rotateY(90deg) translateX(-100px);
}

.right {
   background: #aff;
   transform-origin: right;
   /* 变换*/
   transform: rotateY(90deg) translateX(100px);
}

.forward {
   background: #faa;
   transform: translateZ(100px);
}

.back {
   background: #aaf;
   transform: translateZ(-100px);
}

.up {
   background: #faf;
   transform: rotateX(90deg) translateZ(100px);
}

.down {
   background: #ffa;
   transform: rotateX(-90deg) translateZ(100px);
}

@keyframes rotate {
   0% {
       transform: rotateX(0deg) rotateY(0deg);
   }
   100% {
       transform: rotateX(360deg) rotateY(360deg);
   }
}

<div class="box">
    <div class="up"></div>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="forward"></div>
    <div class="back"></div>
</div>

来源：CSDN

作者：喻洁Aurora

链接：https://blog.csdn.net/weixin_44040583/article/details/103847890

标签

transform