近期在实现音乐播放器的图片旋转时，用到了CSS3的属性transform。在此总结一下：
eg：旋转一个img
img
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.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：这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，因为变形的顺序是从左到右依次进行。