首先，我们来看一下今天我们使用3D变形要实现的两种3D空间效果：

　　第一种不带特效处理的"魔方"：

　　如下图所示：

　　接着我们看下稍做特效处理之后的一种效果：(此处因生成gif动态图,所以，效果看起来比网站投射出来的效果要差些，在桌面端运行就不会有问题了);

　　如下图所示：

　　有没有觉得三维空间3D立体效果很炫呢?带着疑问，我们一块来看一下实现思路吧!

　　首先，我们来学习几个3D变形当中的几个属性知识点;学习3D效果之前，我们来看一张三维空间图片，这是一张三维空间的基本图，分别有x轴、y轴、z轴三个方向;

　　3D平移 translate

　　3D平移分别有三个方向：

　　第一个方向：translateX(x) 定义 3D 转化，仅使用用于 X 轴的值，以X轴平移;

　　看下代码中所示，例如我们创建了一个div标签(我们在div上添加一行字，叫做"我是文字"，方便待会儿查看角度)，然后设置其属性为：

　　然后，我们来看一下3D平移，该场景下的运行效果(注意：主要看下鼠标滑到div上时的一个平移效果);

　　第二个方向：translateX(Y) 定义 3D 转化，仅使用用于 Y 轴的值，以Y轴平移;这个和以X轴方向差不多，也就是上下平移，如果平移的负值，则往Y轴的负方向，也就是往下平移，反之，向上平移(这个地方就不做图解演示说明);

　　第三个方向：translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值，以Z轴平移;对于这个角度的值，就得有三维空间的想象力了，那么，往Z周的正方向来平移，也就是相当于与我们眼睛目视前方的距离越来越近;做个实例，我们来看一下;我们还是使用上面这个已经创建好的div标签，稍作修改，看下效果;

　　注意：在使用translateZ平移时，一定要定义一个透视点作为参照物以及开启3D视图;

　　同样，我们来看一下3D平移，该场景下的运行效果(注意：主要看下鼠标滑到div上时的一个距离我们越来越近的平移效果 Z轴正方向);

　　3D旋转 rotate

　　rotateX(angle) 定义沿 X 轴的 3D 旋转。

　　同样，我们还是以上面这个div为例，只需要将里面的transform部分修改为rotateX，沿X轴旋转;(只看修改代码的部分)

　　我们来看下沿X轴旋转的效果;

　　rotateY(angle) 定义沿 Y 轴的 3D 旋转。(这个只需要将上面代码中的rotateX修改为rotateY即可，我们看下沿Y轴旋转的效果);

　　rotateZ(angle) 定义沿 Z 轴的 3D 旋转。(这个只需要将上面代码中的rotateY修改为rotateZ即可，我们看下沿Z轴旋转的效果)注意：Z轴的空间是哪个角度;

　　ok，学完了3D平移和3D旋转属性之后，我带着大家一块实现一下"魔方";

　　首先，我们需要创建6个div标签，代表魔方的六个面，记得在底部嵌套两个div，便于待会儿做旋转使用;

　　然后，设置各个div的相关属性，注意：因为要使用到往Z轴平移，所以，记得开启3D视图;

　　接着，设置"魔方"的几个面自己的属性，也就是各个面小div的属性;先设置三个面看看效果;同时让六个div上一个的div发生旋转角度，便于我们观看;

　　效果如下图所示：

　　写到这儿，已经有了立体空间的感觉了......我们接着把其余三个面也给补上，看看效果;

　　效果如下图所示：

　　我们需要在"魔方"每个面div里嵌套一个img标签，用来显示图片即可，看下效果;

　　接着，我们需要让其最底部的div沿Y轴方向旋转，看看效果;

　　最后，我们添加截取div边框圆角的属性，以及设置阴影发光颜色，将大功告成了!

　　最终效果如下：