【原创】css3 之 3d变形实现"魔方" -k8凯发旗舰

　　首先，我们来看一下今天我们使用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边框圆角的属性，以及设置阴影发光颜色，将大功告成了！

　　最终效果如下：