变换风格 | transform-style
transform-style
这是一种实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以查阅用法。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
该transform-style CSS属性确定该元素的子元素是否被定位在3D空间中或在该元素的平面中扁平化。
如果扁平化，子元素将不能独立存在于三维空间中。
由于该属性没有被继承，因此必须为该元素的所有非叶子后代设置该属性。
/* Keyword values */
transform-style: preserve-3d;
transform-style: flat;
/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: unset;
| Initial value | flat |
|---|---|
| Applies to | transformable elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
语法
可能值
preserve-3d——指示元素的子元素应位于3D空间中。
形式语法
flat | preserve-3d
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Transforms Level 2The definition of 'transform-style' in that specification. | Editor's Draft | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 12-webkit | (Yes)-webkit (Yes) | 10 (10)-moz 16 (16)1 | No support | 15-webkit | (Yes)-webkit |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 3.0-webkit | (Yes)-webkit (Yes) | 10.0 (10)-moz 16.0 (16)1 | No support | (Yes)-webkit | (Yes)-webkit |
