css3制作八棱锥_【原创】CSS3 之 3D变形实现“魔方”

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

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

如下图所示：

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

如下图所示：

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

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

3D平移 translate

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

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

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

然后，我们来看一下3D平移，该场景下