transform-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。
尝试一下
如果选择平面，元素的子元素将不会有 3D 的遮挡关系。
由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它。
语法
css
/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;
/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: unset;
值
flat-
设置元素的子元素位于该元素的平面中。
preserve-3d-
指示元素的子元素应位于 3D 空间中。
正式语法
transform-style =
flat |
preserve-3d
规范
| Specification |
|---|
| CSS Transforms Module Level 2 # transform-style-property |
| 初始值 | flat |
|---|---|
| 适用元素 | 可变换元素 |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
| Creates stacking context | 是 |
浏览器兼容性
BCD tables only load in the browser