transform

語法:

transform:none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

默認值none

取值:

none:
無轉換
matrix(<number>,<number>,<number>,<number>,<number>,<number>):
以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,相當于直接應用一個[a,b,c,d,e,f]變換矩陣
translate(<length>[, <length>]):
指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默認值为0
translateX(<length>):
指定對象X軸(水平方向)的平移
translateY(<length>):
指定對象Y軸(垂直方向)的平移
rotate(<angle>):
指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
scale(<number>[, <number>]):
指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX(<number>):
指定對象X軸的(水平方向)縮放
scaleY(<number>):
指定對象Y軸的(垂直方向)縮放
skew(<angle> [, <angle>]):
指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默認值为0
skewX(<angle>):
指定對象X軸的(水平方向)扭曲
skewY(<angle>):
指定對象Y軸的(垂直方向)扭曲

說明:

設置或檢索對象的轉換。
  • 對應的腳本特性爲transform

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 4.0-9.0 5.1 13.0-16.0 11.50-11.60
版本 9.0-10.0

寫法:

內核類型 寫法
Webkit(Chrome/Safari) -webkit-transform
Gecko(Firefox) -moz-transform
Presto(Opera) -o-transform
Trident(IE) -ms-transform
W3C transform

示例: