CSS3新特性(01)：Transform（上）
CSS3中动画涉及到三个属性，一个是Transform：变形；一个是Transition：过渡，一个是Animation：动画。其中Transform、Animation可以搭配着使用，实现复杂动画，Transition可以实现简单动画。本文来介绍下Transform：
CSS3新特性中的Transform，作用是变形，即修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变形变换，元素可以实现在二维或三维的空间内的旋转、偏移、缩放和倾斜。
需要注意的是，虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。
一般我们所看到的网页布局，遵循的是坐标系统的概念，这就是说，浏览器在实地渲染和显示一个网页之前，都会先进行布局计算，得到网页中所有元素对应的坐标位置，一旦元素的坐标位置或尺寸信息发生改变，浏览器就会重新进行布局计算，这个重新计算的过程叫做回流（reflow），一般情况下，transform不会引发回流。
transform的值包含了一系列变换函数（transform function）,下面我们来详细介绍下这些函数，有旋转、偏移、缩放、倾斜。
transform的语法如下：
transform:none|<transform-function>+;
transform有两个值，一个是none；一个是transform-function。多个transform-function之间用空格隔开。
transform:rotate(180deg) scale(1.2);
目录
2D旋转：rotate()
3D旋转:rotate3d()
2D偏移：translate()
3D偏移：translate3d()
2D缩放：scale()
3D缩放：scale3d()
倾斜：skew()
综合实例
3D变形浏览器兼容性
2D旋转：rotate()
（1）语法
transform:rotate(45deg);
单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，语法中的意思是顺时针旋转45°。
（2）实例
3D旋转:rotate3d()
（1）语法
transform:rotate3d(x,y,z,a);
rotate3d()中取值说明：
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
rotate3d可以分别写成三个旋转函数，功能等同：
- rotateX(a)函数功能等同于rotate3d(1,0,0,a)
- rotateY(a)函数功能等同于rotate3d(0,1,0,a)
- rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
（2）实例
2D偏移：translate()
（1）语法
transform：translate(sx,sy);
- sx：向X轴方向偏移的数值。
- sy：向Y轴方向偏移的数值。
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);参数表示移动距离，单位px。
- 一个参数时：表示水平方向的移动距离；
- 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
translate还可以分别写，translateX()，translateY()，分别给水平方向和垂直方向定义偏移距离。
（2）实例
3D偏移：translate3d()
（1）语法
transform:translate3d(tx,ty,tz);
其属性值取值说明如下：
- tx：代表横向坐标位移向量的长度；
- ty：代表纵向坐标位移向量的长度；
- tz：代表Z轴位移向量的长度，此值不能是一个百分比值，如果取值为百分比值，将会无效。
translate3d可以拆分成三种写法，分别是translateX()、translateY()、translateZ()。
（2）实例
当z轴值越大时，元素离观看者越近，从视觉上元素就变得更大；反之其值越小时，元素离观看者越远，从视觉上元素就变得更小。
translateZ()函数在实际使用中等同于translate3d(0,0,tz)。仅从视觉效果上看，translateZ()和translate3d(0,0,tz)函数功能非常类似于二维空间的scale()缩放函数。
但实际上完全不同，translateZ()和translate3d(0,0,tz)变形是发生在Z轴上，而不是X轴和Y轴。当使用3D变形，能够在Z轴上移动一个元素确实有很大的好处，比如说在创建一个3D立方体的盒子时。
2D缩放：scale()
（1）语法
transform: scale(0.5); 或 transform: scale(0.5, 2);
参数表示缩放倍数；
- 一个参数时：表示水平和垂直同时缩放该倍率
- 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
（2）实例
scale还可以分别写，scaleX和scaleY，分别定义水平和垂直的缩放比例。
3D缩放：scale3d()
（1）语法
transform:scale3d(sx,sy,sz);
其取值说明如下：
- sx：横向缩放比例；
- sy：纵向缩放比例；
- sz：Z轴缩放比例；
scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。scale3d可以拆分成三种写法，分别是scaleX()、scaleY()、ScaleZ()。
（2）实例
那么为什么scaleZ(5);没效果呢，因为这要搭配别的3D属性才能用。看下面的实例说明：
倾斜：skew()
（1）语法
transform: skew(30deg); 或 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg。
- 一个参数时：表示水平方向的倾斜角度；也就是Ｙ轴往Ｘ轴倾斜。
- 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。第二个参数也就是说Ｘ轴往Ｙ轴倾斜。
skew还可以分开写，skewX是Y轴往X轴倾斜，skewY是X轴往Y轴倾斜。
（2）实例
关于哪个轴向哪个轴倾斜理解起来比较费劲，多看看这个实例中画出来的虚线坐标轴情况吧。
综合实例
这个效果怎么实现呢，就用到多个transform-function了，比如偏移和旋转。但这两个function书写的顺序必须不能错。transform中的transform-function可以多个写，但书写顺序会影响最后的视觉呈现效果。
需要意识到变换函数的顺序。这是因为，每一个变换函数不仅改变了元素，同时也会改变和元素关联的transform坐标系，当变换函数依次执行时，后一个变换函数总是基于前一个变换后的新transform坐标系。
3D变形浏览器兼容性
3D变形在实际使用中同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的支持：
- IE10+中3D变形部分属性未得到很好的支持；
- Firefox10.0至Firefox15.0版本的浏览器，在使用3D变形时需要添加私有属性-moz-，但从Firefox16.0+版本开始无需添加浏览器私有属性；
- Chrome12.0+版本中使用3D变形时需要添加私有属性-webkit-；
- Safari4.0+版本中使用3D变形时需要添加私有属性-webkit-；
- Opera15.0+版本才开始支持3D变形，使用之里需要添加私有属性-webkit-；
- 移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D变形，但在使用时需要添加私有属性-webkit-；Firefox for Android19.0+支持3D变形，但无需添加浏览器私有属性。
后记：这是原文地址《CSS3新特性(01)：Transform（上）》，欢迎来我个人博客逛逛！
