transform-origin

語法:

transform-origin:[ <percentage> | <length> | left | center1 | right ] [ <percentage> | <length> | top | center2 | bottom ]?

預設值50% 50%,效果等同於center center

適用於:所有塊級元素及某些內聯元素

繼承性:無

動畫性:當值為數值時

計算值:除了指定絕對值,否則都為百分比

媒體:視覺

取值:

<percentage>
用百分比指定坐標值。可以為負值。
<length>
用長度值指定坐標值。可以為負值。
left:
指定原點的橫坐標為left
center1:
指定原點的橫坐標為center
right:
指定原點的橫坐標為right
top:
指定原點的縱坐標為top
center2:
指定原點的縱坐標為center
bottom:
指定原點的縱坐標為bottom

說明:

設定或檢索物件以某個原點進行轉換。
  • 該屬性提供2個參數值。
  • 如果提供兩個,第一個用於橫坐標,第二個用於縱坐標。
  • 如果只提供一個,該值將用於橫坐標;縱坐標將預設為50%。
  • 對應的腳本特性為transformOrigin

兼容性:

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

示例: