transform-style

版本：CSS3

CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

示例

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: unset;

浏览器支持

IE不支持transform-style，其余浏览器都支持transform-style

语法

transform-style：flat| preserve-3d

取值

• flat:设置元素的子元素位于该元素的平面中。
• preserve-3d：指示元素的子元素应位于 3D 空间中。

说明：

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

• 当该属性值为preserve-3d时，元素将会创建局部堆叠上下文。
• 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义transform-style属性。
• 对应的脚本特性为transformStyle。

实例

div{
 transform:rotatey(60deg);
 transform-style:preserve-3d;
 -webkit-transform:rotatey(60deg); /*safari and chrome*/
 -webkit-transform-style:preserve-3d; /*safari and chrome*/
}