顾名思义：变换。就可以想到它可以做很多很多的事情了，这个属性有很多的值，在这里简单列举一下：
translate(x,y)、translatex(x)、translatey(y)、translatez(z)、translate3d(x,y,z)：定义位置的<code>移动距离</code>。
scale(x,y)、scalex(x)、scaley(y)、scalez(z)、scale3d(x,y,z)：定义元素的<code>缩放比例</code>。
rotate(angle)、rotatex(a)、rotatey(a)、rotatez(a)、rotate3d(x,y,z,angle)：定义元素的<code>旋转角度</code>。
skew(x-angle,y-angle)、skewx(angle)、skewy(angle)：定义元素的<code>倾斜角度</code>。
我们可以看到这是一个三维的空间图，不要被第一眼的复杂感吓到，仔细分解一下其实还是很清晰的：反正就x轴、y轴、z轴三个方向嘛。
想象一下，假如你现在坐在电脑面前，<code>电脑屏幕中心是原点，原点往右就是x轴正方向，往下就是y轴正方向，往屏幕前方（也就是往人脸）的方向就是z轴的正方向了</code>。把坐标轴的方向搞清楚了，上面的方法就能正确的使用了。
如果你觉得上面的解释仍然太过于枯燥抽象，那就来举个生活中的例子来对应一下三个rotate属性（rotatex、rotatey、rotatez）吧：
如下图：体操表演－绕着x轴旋转就是<code>rotatex</code>（单杠就是x轴）
如下图：钢管舞表演－绕着y轴旋转就是<code>rotatey</code>（钢管就是y轴）
如下图：转盘旋转－绕着z轴在旋转就是<code>rotatez</code>（想象有一根绳子从转盘的中心穿过，图不好找＝＝）
perspective的中文意思是：透视，视角！该属性用来激活一个3d空间。
当为元素定义perspective属性时，其子元素都会获得透视效果（使用了3d变换的元素）。所以一般来说perspective属性都应用在父元素上，我们可以把这个父元素称为<code>舞台元素</code>。
只看解释可能还是难以理解，我们还是用实例说话吧：
从上图可以看出，div1是div2的父元素，开始我们给div2元素增加旋转<code>transform:rotatex(50deg)</code>的时候，只感觉div2在平面上被‘压缩’了，没有3d的效果，然后当我们给父元素div1增加<code>perspective: 150px;</code>的时候，立马就能看到3d的效果了，感受到他的神奇之处了吧。
<code>另外，perspective的取值也一直是个谜，经过我的多次查阅和测试，得出了一下几个结论</code>：
取值为none或不设置，就没有3d空间。
取值越小，3d效果就越明显，也就是你的眼睛越靠近真3d。
貌似当取值为元素的宽度时，视觉效果比较好。
transform-style指定嵌套元素如何在3d空间中呈现。
<code>flat</code>是默认值，表示所有子元素在2d平面呈现；<code>preserve-3d</code>表示所有子元素在3d空间中呈现。
因此，我们想要实现一些3d效果的时候，<code>transform-style: preserve-3d</code>是少不了的。一般而言，该声明应用在3d变换的兄弟元素们的父元素上，我们可以叫它<code>容器</code>。
transform-origin用来改变元素的原点位置。
它的取值方式有很多种，下面我们通过实例（把背景为黄色的div顺时针旋转45deg）来介绍一下它的常用取值方式：
<code>transform-origin:center</code>（默认值，等价于：center center/ 50% 50%）
<code>transform-origin:top</code>（等价于：top center/center top）
<code>transform-origin:bottom</code>（等价于：bottom center/center bottom）
<code>transform-origin:right</code>（等价于：right center/center right）
<code>transform-origin:left</code>（等价于：left center/center left）
<code>transform-origin:top left</code>（等价于：left top）
同理，还可以设置为：
<code>transform-origin:top right（右上角为原点）</code>、<code>transform-origin:bottom right（右下角为原点）</code>、<code>transform-origin:bottom left（左下角为原点）</code>
各位看官等不及了吧，讲了那么多‘废话’，本篇文章的<code>重头戏</code>终于来了！
对于舞台元素
对于容器
立方体的每个面
立方体顶面
立方体底面
立方体左面
立方体右面
立方体前面
立方体后面
最后别忘了给每个不同面加上图片，位置什么的再稍微调一下，这个酷炫的立方体就大功告成了。
最后我们还想要这个立方体自己动起来，我定义了一个动画，看官们可以试试。
最后把这个动画用到这个立方体的容器元素上，就ok了：
总而言之，在我学习css3的过程中，见到了不少的新特性，也学会了如何使用，但是我想说的是我们不管要学会怎么使用，更要去理解每一行代码为什么产生对应的效果，特别是对于<code>3d transform</code>，我们要从根本去理解了<code>3d空间</code>，才能更好的去掌握它的每一个属性值能够带来的效果。
这篇文章内容稍微有点多，自己记录这篇文章的同时又对这个效果学习巩固了一篇，还是蛮开心哒。同时也希望能对各位看官在以后学习<code>3d transform</code>的道路上起到一点点作用！
转载自：阿里技术协会
作者：义坤