纯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 ;