CSS transform-style 屬性

定義和用法

transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。

注釋：該屬性必須與 transform 屬性一同使用。

另請參閱：

CSS3 教程：CSS3 2D 轉換

CSS3 教程：CSS3 3D 轉換

HTML DOM 參考手冊：transformStyle 屬性

實例

使被轉換的子元素保留其 3D 轉換：

div {
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}

親自試一試

CSS 語法

transform-style: flat|preserve-3d;

屬性值

值 描述
flat 子元素將不保留其 3D 位置。
preserve-3d 子元素將保留其 3D 位置。

技術細節

默認值： flat
繼承性： no
版本： CSS3
JavaScript 語法： object.style.transformStyle="preserve-3d"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit- 或 -moz- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-