浅谈CSS3新特性——transform: rotate（旋转） | scale（缩放） | translate（移动） | skew（倾斜）

1、CSS3 transform属性

应用于2D或3D转换，允许对元素进行倾斜、移动、缩放或旋转。

2D转换元素能够改变元素 x 和 y 轴，3D转换元素还能改变其 Z 轴。

属性：

translate(x,y)	定义2D移动
translate3d(x,y,z)	定义3D移动
translateX(x)	定义x轴的移动
translateY(x)	定义y轴的移动
translateZ(x)	定义z轴的3D移动
scale(x,y)	定义2D缩放
scale3d(x,y,z)	定义3D缩放
scaleX(x)	通过设置x轴的值定义缩放
scaleY(x)	通过设置y轴的值定义缩放
scaleZ(x)	通过设置z轴的值定义3D缩放
rotate(angle)	定义2D旋转
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倾斜
none	定义不进行转换

2、CSS3 transform-origin属性

元素转换的中心点默认为元素中心点的位置，使用transform-origin属性可以改变转换中心点的位置。

2D转换元素能够改变转换中心点的 x 和 y 轴位置，3D转换元素还能改变转换中心点的Z 轴位置。

必须与transform属性一同使用。

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

默认：transform-origin : 50% 50% 0

x-axis和y-axis可能的值：left | center | right | 数值(px) | 百分比(%)

z-axis可能的值：数值(px) 

eg：倾斜

eg：移动

eg：缩放

eg：旋转