transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
基本测试代码：
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style><div>Hello World</div>
上面代码的测试效果如下图：
transform属性的基本语法如下：
transform: none|transform-functions;
上面基本例子里面使用的transform: rotate()中的rotate()，只是transform-functions里面一种效果，全部效果如下图：
全部记忆下来不太容易，具体使用时打开参考使用即可，也可以记住常用的几种就行。
这里以transform属性里面的translate的值为例来分析一下：
translate 是同时设置 translateX 和 translateY， 所以里面可以填两个参数， 第一个值 X 第二个 Y
比如transform: translateX(200px);就是向右平移200px,如果transform: translateX(-200px);就是向左平移200px;
同理transform: translateY(300px);就是向下平移300px,负数向上平移。
transform: translate(200px, 300px);就是向右平移200px, 向上平移300px。
(如果嫌平移的过快，可以添加过渡效果transition。)
translate3d 是同时设置 translateX ，translateY 和 translateZ 所以里面可以填三个参数
只不过有点不同的是：
translate 如果第二个参数不填的话，默认是0；
translate3d 三个参数必须都填上，否则就没有效果。
translate3d和translate的区别就是添加了translateZ，这个平移可以理解为垂直于2D平面的方向，如果不添加旋转的话，Z 轴是朝向我们的，所以看不出效果。
比如我们添加旋转transform: rotateY(90deg) translateZ(50px);这样就可以看到效果了，如下图：
目前还有一个问题，就是鸿硕想使用transition来监听transform却未能完全实现，比如上图中假如就一种transform: rotateY()，我们可以直接使用transition: transform 2s;或者transition: all 2s;来实现，但是上图中transform中有两个值，一个是rotateY()，另一个是translateZ()，鸿硕想使用transition实现上图中的效果，也就是先使用rotateY()旋转，然后再使用translateZ()在Z轴上面平移，鸿硕理想化的做法就是想实现这样的形式，如下：
transition: 'tansform: rotateY()' 2s; /* 先过渡2s旋转一定的角度 */
transition: 'tansform: translateZ()' 1s ease 2s ; /* 待上面旋转的过渡2s效果结束后，再开始Z轴平移一定的距离。*/
但是这种代码鸿硕亲测不能成功！
我网上查询了一下，没有找到答案，其实我的需求和这个网友基本一致，如下图：
如果哪位朋友知道的话，欢迎指点交流。
也可以加群讨论： 
656992002
