CSS3 transform使用参考指南
语法:
transform : none | <transform-function> [ <transform-function> ]*
取值:
-
none :
- 指定一个身份转变。 matrix(<number>, <number>, <number>, <number>, <number>, <number>) :
- 以一个含六值的(a,b,c,d,e,f) 变换矩阵的形式指定一个2D变换,相当于直接应用一个 [a b c d e f]变换矩阵。 translate(<translation-value>[, <translation-value>]) :
- 通过矢量[tx, ty]指定一个 2D translation, tx 是第一个过渡值参数, ty 是第二个过渡值参数选项。如果 <ty> 未被提供,则ty以 0 作为其值。 translateX(<translation-value>) :
- 通过给定一个X方向上的数目指定一个 translation translateY(<translation-value>) :
- 通过给定Y方向的数目指定一个 translation scale(<number>[, <number>])
- 提供执行[sx,sy]缩放矢量的两个参数指定一个 2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。 scaleX(<number>) :
- 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。 scaleY(<number>) :
- 使用 [i,sy] 缩放矢量执行缩放操作,sy为所需参数。 rotate(<angle>) :
- 通过指定的角度参数对原元素指定一个 2D rotation(2D 旋转),需先有 transform-origin属性的定义。 skewX(<angle>) :
- 按给定的角度沿X轴指定一个 skew transformation(斜切变换)。 skewY(<angle>) :
- 按给定的角度沿Y轴指定一个 skew transformation(斜切变换)。 skew(<angle> [, <angle>]) :
- X轴Y轴上的 skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
说明:
应用于block水平和inline水平的元素。
引擎类型 | Gecko | Webkit | Presto |
---|---|---|---|
transform | -moz-transform | -webkit-transform | |
兼容性:
类型 | Internet Explorer | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
版本 | (×)IE6 | (×)Firefox 2.0 | (√)Chrome 1.0.x | (×)Opera 9.63 | (√)Safari 3.1 |
(×)IE7 | (×)Firefox 3.0 | (√)Chrome 2.0.x | (√)Opera 10.5 | (√)Safari 4 | |
(×)IE8 | (√)Firefox 3.5 | ||||
代码与实例
.transform{
-moz-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
-webkit-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
}
HTML代码:
<img class="transform" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
效果截图