CSS3之transform属性

近期在实现音乐播放器的图片旋转时，用到了CSS3的属性transform。在此总结一下：

支持transform浏览器:

不同浏览内核的transform有不同的书写规则，如果需要兼容各浏览器的话，所有写法都需要调用，如下所示：

eg：旋转一个img

img
{
transform:rotate(7deg);  /* W3C标准 */
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Mozilla内核浏览器：firefox3.5+ */
-webkit-transform:rotate(7deg); /* Webkit内核浏览器：Safari and Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transform="rotate(30deg)"

jQuery语法：$("img").css('transform','rotate(30deg)');

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

语法如下：

transform: none|transform-functions;

下面列举一些常用的transform属性的值：

1.旋转rotate

transform: rotate(30deg); //正数为顺时针旋转，负数为逆时针旋转.单位为deg

transform:rotate3d(x,y,z,angle)；//定义 3D 旋转。

transform:rotateX(angle)；//定义沿着 X 轴的 3D 旋转。rotateY(angle)和rotateZ(angle)分别为沿着Y轴和Z轴

2.缩放scale

transform: scale(1.5,1.5); //定义 2D 缩放转换。两个参数分别为水平方向和垂直方向的缩放倍率

transform:scale3d(x,y,z)；//定义 3D 缩放转换。
transform: scaleX(x); //通过设置 X 轴的值来定义缩放转换。
transform: scaleY(y); //通过设置 Y 轴的值来定义缩放转换。
transform: scaleZ(z); //通过设置 Z 轴的值来定义 3D 缩放转换。

3.倾斜skew

skew(30deg);  //单位为deg

transform:skew(x-angle,y-angle);  //定义沿着X和Y轴的2D倾斜转换。

transform:skewX(x-angle);  //定义沿着X轴的2D倾斜转换。
transform:skewY(y-angle);  //定义沿着Y轴的2D倾斜转换。

4.移动translate

translate(50px,20px);  //单位为px

transform:translate(x,y);  //定义2D装换。两个参数分别为水平方向和垂直方向的移动距离

transform:translateX(x);  //参数为水平方向移动距离
transform:translateY(y);  //定数为垂直方向移动距离
transform:translate3d(x,y,z);  //定义3D转换

5.多方法组合

transform: rotate(30deg) scale(0.5) skew(30deg, 30deg) translate(50px, 50px);

note：这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，因为变形的顺序是从左到右依次进行。