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*/
}