transform

  • 版本:CSS3
  • 2015.8.11
wechat
WEB前端开发官方公众号
10年服务3000万前端开发工程师

微信号:webfedev

微信扫一扫关注,每天分享前端干货

语法:

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

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-8.0 2.0-3.0 4.0-35.0-webkit- 6.0-8.0-webkit- 15.0-22.0-webkit- 6.0-8.4-webkit- 2.1-4.4.4-webkit- 18.0-34.0-webkit-
9.0-ms- 3.5-15.0-moz- 36.0+ 9.0+ 23.0+ 9.0+ 40.0+ 35.0+
10.0+ 16.0+

示例: