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

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
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+

示例: