HTML | DOM 样式 transformStyle 属性

简介

transformStyle 属性用于指定子元素如何在三维空间中相互转换。这个属性只在定义了 CSS 变换（transform）效果的元素才会生效。

语法

<style>
    element {
        transform-style: flat|preserve-3d|initial|inherit;
    }
</style>

• flat：默认值。子元素不会在3D空间中相互转换，而是只在2D平面中进行。
• preserve-3d：子元素将在一个自己独立的三维空间中变换。可以将一个元素及其子元素放置到 3D 空间中。
• initial：把属性设回它的默认值。
• inherit：从父元素继承该属性。

实例

flat

<div style="transform: rotateX(60deg);">
    <p style="transform: rotateX(-60deg);">这是一个段落。</p>
</div>

在这个例子中，父元素和子元素都使用 transform: rotateX()，但是由于父元素的 transform-style 属性是默认值 flat，子元素的变换只对其本身作用，没有沿着父元素的轴心向后移动。

preserve-3d

<div style="transform: rotateX(60deg); transform-style: preserve-3d;">
    <p style="transform: rotateX(-60deg);">这是一个段落。</p>
</div>

在这个例子中，两个元素都使用 transform: rotateX()，并且父元素的 transform-style 属性是 preserve-3d。此时子元素的变换顺着父元素的轴心向后传递，整个元素就像在一个立方体中旋转。

注意事项

• transform-style 属性只对定义了 transform 变换的元素有效。
• 该属性对于定位属性（position）设为 fixed 的元素无效。
• 低版本浏览器可能不支持该属性。

参考链接

• CSS transform-style 属性（菜鸟教程）
• transform-style（MDN Web Docs）