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 ⁨2015年9月⁩.

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;