首先展示下效果

html结构：

<div id="state"> <div class="cube"> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side top"></div> <div class="side botton"></div> </div> </div> <div class="side top"></div> <div class="side botton"></div> </div></div>

1、舞台的搭建

设置视距属性，形成3D效果：（perspective） #state{ /*搭建舞台*/ margin: 200px auto; width: 300px; height: 300px; perspective: 1200px; /*设置3D视距*/ font-size: 5em; font-weight: bold; }

2、容器的设置

正方体的搭建，是通过定位将六个面的正方形，都重叠在一起，形成一个面，并设置子元素的3d效果，让子元素通过旋转和平移操作组成正方体： ps：注意得设置容器的宽高，否则，设置动画时，会出现旋转中心不是正方体的中点，而是某一条边。 .cube{ /*设置正方体*/ position: relative; transform-style:preserve-3d; width:100%; height: 100%; animation: x-rotate 6s linear infinite;/*设置动画*/ }

3、六个正方形的通过旋转和平移形成正方体：戳这里-3d坐标参考

.side { /*设置定位使得正方形重叠*/ color:blue; text-align: center; width: 300px; height: 300px; line-height: 300px; position: absolute; opacity: 0.7; background-color: black; } .front { transform: translateZ(150px); /*往Z轴正平移等于物体离我们近了*/ background-color: chartreuse; } .back{ transform:translateZ(-150px) ;/*往Z轴负平移等于物体离我们远了*/ background-color: sandybrown;}.left{ transform: rotateY(-90deg) translateZ(150px); /*必须旋转后再平移，否则旋转的中点会改变，Z轴的平移方向可以参考3d坐标参考*/ background-color: aqua;}.right{ background-color:cornflowerblue; transform: rotateY(90deg) translateZ(150px);}.top{ background-color:brown; transform: rotateX(90deg) translateZ(150px);}.botton{ background-color:saddlebrown; transform: rotateX(-90deg) translateZ(150px);} 最后附上详细资料的博客： 3d立方体资料一 资料二 资料三