CSS3动画效果之Transform

无意中翻看博客发现这个属性，就顺便熟悉了一下，百度了一下和查看了CSS3帮助文档，特整理一下

Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转、拉伸、平移、倾斜等。

目前浏览器并不是完全支持所有的Transform ，

IE9、               Firefox 和     Opera 仅支持2D transforms ，相应的CSS定义为：

-ms-transform 、-moz-transform 和-o-transform ，

而Safari 和Chrome 都支持2D和3D transforms ，相应的CSS定义为：

-webkit-transform

该属性的值主要有如下：

 

Value	Description
none	定义这不需要转换
matrix(n,n,n,n,n,n)	使用有6个值的矩阵(matrix)来定义一个 2D 转换
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	使用有4*4的矩阵(matrix)来定义一个 3D 转换
translate(x,y)	定义一个2D 转换,x:水平位移,y:垂直位移,个人觉得和margin-left(left) 和margin-top(top)类似.
translate3d(x,y,z)	定义一个2D 转换,x:水平位移,y:垂直位移,z:Z方向的位移
translateX(x)	定义一个水平方向2D 转换
translateY(y)	定义一个垂直方向2D 转换
translateZ(z)	定义一个Z方向3D 转换
scale(x,y)	定义一个2D 拉伸, x:水平拉伸,y:垂直拉伸
scale3d(x,y,z)	义一个3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸
scaleX(x)	定义一个水平方向拉伸
scaleY(y)	定义一个垂直方向拉伸
scaleZ(z)	定义一个Z方向的拉伸
rotate(angle)	定义一个 2D 旋转, angle :旋转角度(deg)
rotate3d(x,y,z,angle)	定义一个 3D 旋转,
rotateX(angle)	定义一个X轴3D旋转
rotateY(angle)	定义一个Y轴3D旋转
rotateZ(angle)	定义一个Z轴3D旋转
skew(x-angle,y-angle)	定义一个X轴和Y轴的2D 倾斜
skewX(angle)	定义一个X轴的2D 倾斜
skewY(angle)	定义一个Y轴的2D 倾斜
perspective(n)	定义一个3D转换效果和透视图

 transform-origin配合transform，目的是定义元素旋转的位置

语法：transform-origin: x-axis y-axis z-axis;

说明：

Property Value	Description
x-axis	定义X轴的转换位置. 可能的值有: left center right length %
y-axis	定义Y轴的转换位置. 可能的值有: top center bottom length %
z-axis	定义Z轴的转换位置. 可能的值有: length

默认值：50% 50%，效果等同于center center

 可取值的定义：

<percentage>：

用百分比指定坐标值。可以为负值。可以是纯数字或者数字加百分比

<length>：

用长度值指定坐标值。可以为负值。必须是数字加单位(如px)

left：

指定原点的横坐标为left

center①：

指定原点的横坐标为center

right：

指定原点的横坐标为right

top：

指定原点的纵坐标为top

center②：

指定原点的纵坐标为center

bottom：

指定原点的纵坐标为bottom