如果我们想利用CSS来构建3D效果，那么我们要自已了解关于3D的属性，在这里我只用了perspective（设置元素被查看位置的视图或者可以理解为眼睛到屏幕的距离），transform-style（规定如何在 3D 空间中呈现被嵌套的元素），transform-origin（设置旋转元素的基点位置），transform（属性向元素应用 2D 或 3D 转换）。
我们可以试想把一个正方体剪切成6个正方形,它的前后两个面重叠在一起了，如图下：
下面我们来看一个例子：
1.首先，我们来用CSS实现一个正方体，一个正方体有6个面来组成的，我们来写6个div,并用1个div来包裹起来。为了方便查看，我设置了每一个div的背景颜色都不一样。
2.给box设置width,height以及transfrom-style:preservs-3d属性来保留下面的6个div的3d转换，当然也给每一个子元素div全部绝对定位和宽·高。为了方便查看，让它在中间显示，并且我设置了每一个div的背景颜色都不一样。
3. 我们给每个子元素div定位和背景颜色。如下图：
4.然后我们给前面4个子元素旋转，第5个让它保留不动，最后一个让它沿Z轴位移。在这里我先说明一下transform-origin属性，它有3个值为x轴 y轴 z轴;，而我第1个子元素的样式transform-origin:50% 100%;x轴不重要，重要的是y轴。因此我们可以用transform-origin:bottom;，以此类推第2个元素。第3个子元素的样式transform-origin: 100% 50%;y轴不重要，重要的是x轴。因此我们可以用transform-origin: right;，以此类推第4个元素。下面请看代码
5.下面我们来看一下效果，给它一个伪类，让它沿X轴旋转360度，Y轴50度，并让它过渡时间为5秒,效果如下：
我们可以看到还是有问题的，这时我们需要一个给boby设置一个属性就是body{perspective: 1000px; }，这样我们在来看一下效果：
我们也可以给box设置旋转元素的基点位置:transform-origin: 50%50%;这时你会发现怎么没有变化呢，我们就要想到我们是将Z轴改变而不是X轴和Y轴，当然有一些人认为我也可以这样写：transform-origin:50% 50% 50%;这时我们发现还是没有变化的，因为我们没有得Z轴设置值，所以我们应该这样写transform-origin:50% 50%-103px;这样我们就完成了一个3D效果了。如下图：