transform-style

語法:

transform-style:flat | preserve-3d

預設值flat

適用於:變換元素

繼承性:無

動畫性:否

計算值:指定值

媒體:視覺

取值:

flat:
指定子元素位於此元素所在平面內
preserve-3d:
指定子元素定位在三維空間內

說明:

指定某元素的子元素是(看起來)位於三維空間內,還是在該元素所在的平面內被扁平化。
  • 當該屬性值為「preserve-3d」時,元素將會建立局部堆疊上下文。
  • 決定一個變換元素看起來是處在三維空間還是平面內,需要該元素的父元素上定義 <' transform-style '> 屬性。
  • 對應的腳本特性為transformStyle

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-9.0 2.0-9.0 4.0-11.0 6.0-8.0-webkit- 15.0-22.0-webkit- 6.0-8.4-webkit- 2.1-2.3 18.0-34.0-webkit-
10.0-11.0-ms-#1 10.0-15.0-moz- 12.0-35.0-webkit- 9.0+ 23.0+ 9.0+ 3.0-4.4.4-webkit- 35.0+
Edge 16.0+ 36.0+ 40.0+
  1. 不支援「preserve-3d」屬性值

示例: