CSS 3 transform-style 属性
CSS transform--style 属性指定嵌套元素是怎样在三维空间中呈现
使用此属性必须先使用 transform 属性
Safari/Chrome用户： 为了更好地理解 transform--style属性，请 查看演示
| 默认值 | flat |
|---|---|
| 继承 | no |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.transformStyle="preserve-3d" |
语法
transform-style: flat|preserve-3d;
值说明
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈现 |
| preserve-3d | 表示所有子元素在3D空间中呈现 |
浏览器支持
下表中的数字表示支持该属性的第一个浏览器版本号
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号
| 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
范例
让转换的子元素保留 3D 转换
div { transform: rotateY(60deg); transform-style: preserve-3d; /* Safari and Chrome */ -webkit-transform: rotateY(60deg); -webkit-transform-style: preserve-3d; }