需要用到的知识点
（1）rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
（2）RotateY
通过 rotateX() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
（3）RotateZ
通过 rotateX() 方法，元素围绕其 Z 轴以给定的度数进行旋转。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Y 轴。
景深
景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。虽然透镜只能够将光聚 到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。当焦点设在超焦距处时，景深 会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，这是最大的景深。
perspective(n) 定义 3D 转换元素的透视视（设置景深）
这个属性指定了子元素如何在空间中展示，只有两个属性值：flat（默认）和preserve-3d，flat 表示所有子元素在2D平面呈现，preserve-3d 表示所有子元素在3D平面呈现，（prederve是保护、维持的意思，preserve-3d就是保持三维空间的意思），当然如果我们想要3D的效果，就要使用 transform-style: preserve-3d;
这个属性只是针对设置属性元素的子元素如何展示，而对子元素的子元素无效，而且对于设置了overflow: hidden;的元素，设置3D效果会失效，道理很简单，跳出了父元素平面的子元素无法显示了，结果自然还是2D效果，应用于这个属性的元素我们称作“容器”，这个属性我们下面通过一个例子再来体会
如果你已经 了解了那些知识，那么接下来我们来一起去做一个立方体吧。
其实很简单
1.通过HTML +css 先画出一个拆开的立方体的样子
2.把立方体叠起来。（通过旋转属性）
html 里面六个div表示六个面
下面为代码..........
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ /*设置景深*/ perspective: 2000px; } .div1_1{ width: 2000px; height: 2000px; margin :auto; position: relative; /*为其子元素搭建3d环境*/ transform-style: preserve-3d; /*设置转动的坐标点为立方体的中心*/ transform-origin: center center -250px; /*初始转个角度效果明显一点 其实可以配合动画，或过度效果更好*/ transform: rotateY(45deg) rotateZ(45deg); } /*整体设置立方体每个面的大小*/ .div1_1 div{ width: 500px; height: 500px; background:lightcyan; border: 1px solid blue; position: absolute; } .forward{ /*上面的位置*/ top: 750px; left: 750px; } .back{ /*下面的位置*/ top: 750px; left: 750px; /*把下面向下移动（可以理解为向屏幕里面去） 移动过去 是反的。用手心手背来说明，比如你手心向上，向下移动 ，这时手心 变成为立方体的里面，手背是立方体的外面。我们需要把它绕正方形的 中心线旋转180deg。 */ transform: translateZ(-500px) rotateX(180deg); } .top{ /*顶部位置*/ top: 250px; left: 750px; /*顶部沿着自己的底边向屏幕里面旋转90deg*/ transform-origin: bottom; transform: rotateX(90deg); } .bottom{ /*底部位置*/ top: 1250px; left: 750px; /*底部沿着自己的上边往屏幕里面旋转90deg*/ transform-origin: top; transform: rotateX(-90deg); } .left{ /*左边位置 */ top: 750px; left: 250px; /*左边沿着右边向屏幕里面旋转90deg*/ transform-origin: right; transform: rotateY(-90deg); } .right{ /*右边位置*/ top: 750px; left: 1250px; /*右边沿着左边向屏幕里面旋转90deg*/ transform-origin: left; transform: rotateY(90deg); } /*在这里要注意的是3d旋转时，绕y，z轴时逆时针为正方形， 绕x轴顺势针为正方向。 */ </style> </head> <body> <div class="div1"> <div class="div1_1"> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <div class="forward"></div> <div class="back"></div> </div> </div> </body></html>
效果 图
转载于:https://www.cnblogs.com/xiaomingzhangbiao/p/9795519.html
相关资源：HTML5 CSS3 ： 3D立方体旋转动画实例源码