CSS3-transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

兼容性

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

兼容写法：

-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);

1、rotate

旋转，整数为瞬时间，负数为逆时针

-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);

---

2、skew

扭曲：以元素原点为中心扭开，就像一个形状可变的四边形被施加水平方便和垂直方向的力一样，是它的形状发生变化。分为三种情况：
1、skew（x,y)，y值缺省时为哦
2.skewX(x)
3.skewY(y)

单位deg，角度

-webkit-transform: skew(7deg);
-moz-transform: skew(7deg);
-ms-transform: skew(7deg);
-o-transform: skew(7deg);
transform: skew(7deg);

---

3、scale

缩放。三种情况
scale(x,y),scale(x),scale(y)

-webkit-transform: scale(2,1.5);
-moz-transform: scale(2,1.5);
-ms-transform: scale(2,1.5);
-o-transform: scale(2,1.5);
transform: scale(2,1.5);

---

4、translate

平移
translate(x,y)
translateX(x)
translateY(y)

-webkit-transform: translate(10px,10px);
-moz-transform: translate(10px,10px);
-ms-transform: translate(10px,10px);
-o-transform: translate(10px,10px);
transform: translate(10px,10px);

---

5、matrix

矩阵变化，其含有六个值

matrix(a,b,c,d,e,f);

-webkit-transform: matrix(1,2,4,5,2,0);
-moz-transform: matrix(1,2,4,5,2,0);
-ms-transform: matrix(1,2,4,5,2,0);
-o-transform: matrix(1,2,4,5,2,0);
transform: matrix(1,2,4,5,2,0);

上述的转换中，都可以采用3D的方式，3D转换时，在移动端会开启设备的硬件加速。

元素的原点

上面讲到的旋转，扭曲变换都基于元素的原点，那元素的原点在什么地方。默认情况下，它处理x轴的50%与y轴的50%的交汇处。
我们可以通过transform-origin来设置。
可有取值为
top: 上中
right：右中
left: 左中
bottom：下中
center：中间
right top 右上
bottom right 右下
bottom left 左下
top left 左上
还可以使用百分比

-webkit-transform-origin: 0.3 0.3;
-moz-transform-origin: 0.3 0.3;
-ms-transform-origin: 0.3 0.3;
-o-transform-origin: 0.3 0.3;
-transform-origin: 0.3 0.3;