transform

语法：

transform：none | <transform-function>+

transform-function list:

matrix() = matrix(<number>[,<number>]{5,5})

matrix3d() = matrix3d(<number>[,<number>]{15,15})

translate() = translate(<translation-value>[,<translation-value>]?)

translate3d() = translate3d(<translation-value>,<translation-value>,<length>)

translatex() = translatex(<translation-value>)

translatey() = translatey(<translation-value>)

translatez() = translatez(<length>)

rotate() = rotate(<angle>)

rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)

rotatex() = rotatex(<angle>)

rotatey() = rotatey(<angle>)

rotatez() = rotatez(<angle>)

scale() = scale(<number>[,<number>]?)

scale3d() = scale3d(<number>,<number>,<number>)

scalex() = scalex(<number>)

scaley() = scaley(<number>)

scalez() = scalez(<number>)

skew() = skew(<angle>[,<angle>]?)

skewx() = skewx(<angle>)

skewy() = skewy(<angle>)

perspective() = perspective(<length>)

<translation-value> = <length> | <percentage>

默认值：none

适用于：所有块级元素及某些内联元素

继承性：无

动画性：是

计算值：指定值，但相对长度会转换为绝对长度

媒体：视觉

取值：

none：
无转换

2D Transform Functions：

matrix()：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：
指定对象X轴（水平方向）的平移
translatey()：
指定对象Y轴（垂直方向）的平移
rotate()：
指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：
指定对象X轴的（水平方向）缩放
scaley()：
指定对象Y轴的（垂直方向）缩放
skew()：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：
指定对象X轴的（水平方向）扭曲
skewy()：
指定对象Y轴的（垂直方向）扭曲

3D Transform Functions：

matrix3d()：
以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：
指定对象Z轴的平移
rotate3d()：
指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：
指定对象在x轴上的旋转角度
rotatey()：
指定对象在y轴上的旋转角度
rotatez()：
指定对象在z轴上的旋转角度
scale3d()：
指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：
指定对象的z轴缩放
perspective()：
指定透视距离

说明：

设置或检索对象的转换。
  • 对应的脚本特性为transform。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 橙色 = 通过第三方工具支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5 12-16 #1 2-3 4-35 -webkit- 3.1-8 -webkit- 9-10.1 3.2-8.4 -webkit- 2.1-4.4.4 -webkit- 7-10 -webkit- 10 61 56 10+ 11.4 -webkit- 4+ 1.2 7.12
6-8 3.5-15 -moz- 36+ 9+ 10.5-12 -o- 9.0+ 11+
9 -ms- #1 16+ 12.1
10-11 #1 15-22 -webkit-
23+
  1. 通过transform，IE6+也可支持。本页下方的示例已使用此方案。IE5.5-8也可以使用滤镜来实现该效果: progid:DXImageTransform.Microsoft.Matrix()
  2. 通过selectivizr，可以免去css3前缀。

示例：