CSS3 transform-style 屬性

實(shí)例

讓轉(zhuǎn)換的子元素保留3D轉(zhuǎn)換：

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

嘗試一下 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號。

屬性          
transform-style 36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

屬性定義及使用說明

transform--style屬性指定嵌套元素是怎樣在三維空間中呈現(xiàn)。

注意： 使用此屬性必須先使用transform 屬性.

Safari/Chrome用戶：為了更好地理解transform--style屬性，請查看實(shí)例演示.

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

語法

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