HTML代码结构
当使用css属性perspective的时候，需要一个容器并设置perspective depth值，然后让它的子元素在这个容器中做运动
.container { width: 200px; height: 200px; perspective: 1000px; margin: 100px auto 0; }
设置Perspective值
给perspective设置深度值，这个值表示屏幕到元素所在环境最远距离
.container { width: 200px; height: 200px; perspective: 1000px; margin: 100px auto 0; }
给立方体设置3D属性
.cube { transform-style: preserve-3d; width: 100%; height: 100%; position: relative; }
给立方体的每个面设置绝对定位，长宽100%，然后设置背景为网格状。
.face { position: absolute; width: 100%; height: 100%; background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255)); }
对立方体的六个面进行Z轴的变换并且旋转，使它形成立方体的六个面
.top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .front { transform: rotateX(0deg) translateZ(100px); } .back { transform: rotateX(-180deg) translateZ(100px); }
剩下最后一步就是让这个立方体旋转起来，设置无线循环的animation动画
@keyframes spin { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube { transform-style: preserve-3d; width: 100%; height: 100%; position: relative; animation: spin 5s infinite linear; }
实现效果如下
