纯css制作旋转的立方体

十年热恋 提交于 2020-01-06 17:05:53

思路:
首先有一个正方形,根据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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!