【系列】css3<2D>转换

通过css3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
浏览器支持
IE10、Firefox以及Opera支持transform属性
Chrome和Safari需要前缀-webkit-

注释：IE9需要前缀-ms-

一、css3<2D转换>属性
1)、transform：向元素应用2D或3D转换。
IE10、Firefox、Opera支持transform属性。
IE9支持替代的-ms-transform属性（仅适用于2D转换）
Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）
transform: none|transform-functions;

2)、transform-origin
允许你改变被转换元素的位置
IE下使用-ms-transform-origin属性，但仅限于2D转换
Firefox下使用-moz-transform-origin属性，但仅限于2D转换
Opera下使用-o-transform-origin属性，但仅限于2D转换
Chrome下使用-webkit-transform-origin属性，同时适用于2D和3D转换。
transform-origin: x-axis y-axis z-axis;
可能的值：Left center right length %

二、css3<2D转换>函数（transform-function-2d）
函数：
matrix(n,n,n,n,n,n)  //定义2D转换，使用六个值的矩阵
说明：matrix(a,b,c,d,e,f,g) a和d表示缩放，b和c表示斜切，f和g表示位移

translate(x, y)  //定义2D转换，沿着x和Y轴移动元素（位移）
如：transform:translate(30px, 30px); 注意带有单位

translateX(n)  //定义2D转换，沿着x轴移动元素
translateY(n)  //定义2D转换，沿着y轴移动元素
scale(x,y)  //定义2D缩放转换，改变元素的宽度和高度  
如：transform:scale(0.5,0.5)，其值的范围从0-1，表示缩放倍数

scaleX(n)  //定义2D缩放转换，改变元素的宽度
scaleY(n)  //定义2D缩放转换，改变元素的高度
rotate(angle)  //定义2D旋转，在参数中规定角度。角度（deg），弧度（rad）
skew(x-angle, y-angle)  //定义2D倾斜转换，沿着x和y轴
skewX(angle)  //定义2D倾斜转换，沿着x轴
skewY(angle)  //定义2D倾斜转换，沿着y轴

三、实例