CSS transform-style：3D 转换的关键属性

2025-12-23 8099阅读

在网页设计中，CSS 的 transform 属性为我们带来了丰富的视觉效果，而 transform-style 则是实现 3D 转换效果的关键属性。它决定了元素的子元素是在 2D 平面还是 3D 空间中进行变换。

基本概念

transform-style 有两个主要取值：flat（默认值）和 preserve-3d。当设置为 flat 时，元素的子元素会在 2D 平面上进行变换，所有的 3D 变换效果（如 rotateX、rotateY 等）都会被压缩到 2D 空间中。而当设置为 preserve-3d 时，子元素会在 3D 空间中进行变换，能够呈现出真实的 3D 效果。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 父元素设置 preserve - 3d */
    .parent {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transform-style: preserve-3d; /* 关键属性 */
      transform: rotateX(45deg);
    }

    /* 子元素 */
    .child {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

在上述代码中，父元素设置了 transform-style: preserve-3d，并且进行了 rotateX 变换。此时子元素会在 3D 空间中呈现出相应的旋转效果。如果将 transform-style 改为 flat，子元素的旋转效果就会被压缩到 2D 平面，失去 3D 立体感。

实际应用场景

3D 卡片翻转效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .card {
      width: 200px;
      height: 300px;
      margin: 100px auto;
      transform-style: preserve-3d;
      transition: transform 1s;
    }

    .card:hover {
      transform: rotateY(180deg);
    }

    .front,
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: hidden; /* 隐藏背面 */
    }

    .front {
      background-color: lightgreen;
    }

    .back {
      background-color: lightcoral;
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</body>

</html>

这里通过 transform-style: preserve-3d 实现了卡片翻转的 3D 效果。当鼠标悬停在卡片上时，卡片会绕 Y 轴旋转 180 度，展示背面内容。

3D 导航菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    nav {
      transform-style: preserve-3d;
    }

    nav ul {
      list-style: none;
    }

    nav ul li {
      display: inline-block;
      padding: 10px 20px;
      transform: translateZ(50px); /* 在 Z 轴上移动 */
    }
  </style>
</head>

<body>
  <nav>
    <ul>
      <li>首页</li>
      <li>产品</li>
      <li>关于我们</li>
      <li>联系我们</li>
    </ul>
  </nav>
</body>

</html>

通过设置 transform-style: preserve-3d，可以让导航菜单的子元素在 3D 空间中进行布局和变换，例如在 Z 轴上移动，营造出独特的空间层次感。

注意事项

兼容性：虽然现代浏览器对 transform-style 支持较好，但仍需注意一些老版本浏览器可能存在兼容性问题。可以通过添加浏览器前缀（如 -webkit- 等）来提高兼容性。
性能影响：过多复杂的 3D 变换（尤其是包含大量子元素且都设置 preserve-3d）可能会对页面性能产生一定影响。在实际项目中需要根据需求权衡效果和性能。