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 空间中还是平面中。

尝试一下

transform-style: flat;

transform-style: preserve-3d;

<section class="default-example" id="default-example">
  <div class="transition-all layer" id="example-element">
    <p>Parent</p>
    <div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
  </div>
</section>

.layer {
  background: #623e3f;
  border-radius: 0.75rem;
  color: white;
  transform: perspective(200px) rotateY(30deg);
}

.numeral {
  background-color: #ffba08;
  border-radius: 0.2rem;
  color: #000;
  margin: 1rem;
  padding: 0.2rem;
  transform: rotate3d(1, 1, 1, 45deg);
}

如果选择平面，元素的子元素将不会有 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	是

浏览器兼容性

参见

Using CSS transforms