transform-style - 3D 空间渲染

什么是 transform-style？

transform-style 属性决定元素的子元素是在 3D 空间中定位，还是在元素所在的平面内扁平化。

• 应用对象：设置在父元素上，影响其子元素
• 使用场景：创建 3D 立方体、卡片翻转等复杂 3D 效果
• 配合使用：通常与 perspective 一起使用

语法说明

.parent {
  transform-style: flat | preserve-3d;
}

• flat - 默认值，子元素在 2D 平面内渲染
• preserve-3d - 子元素在 3D 空间中渲染

对比演示：flat vs preserve-3d

下面两个立方体使用相同的 3D 变换，但 transform-style 不同

/* 错误：子元素被扁平化 */
.cube {
  transform-style: flat;
}

/* 正确：子元素在 3D 空间中 */
.cube {
  transform-style: preserve-3d;
}

示例 1：3D 立方体

创建一个可以旋转的 3D 立方体

/* 父容器设置透视 */
.cube-container {
  perspective: 800px;
}

/* 立方体启用 3D 空间 */
.cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}

/* 每个面的位置 */
.face-front  { transform: translateZ(100px); }
.face-back   { transform: rotateY(180deg) translateZ(100px); }
.face-right  { transform: rotateY(90deg) translateZ(100px); }
.face-left   { transform: rotateY(-90deg) translateZ(100px); }
.face-top    { transform: rotateX(90deg) translateZ(100px); }
.face-bottom { transform: rotateX(-90deg) translateZ(100px); }

示例 2：卡片翻转

点击卡片查看翻转效果

/* 卡片容器 */
.card {
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

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

/* 卡片两面 */
.card-front {
  backface-visibility: hidden;
}

.card-back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

重要注意事项

• 配合 perspective：通常需要在父元素或祖先元素上设置 perspective 才能看到 3D 效果
• 性能考虑：preserve-3d 会增加渲染复杂度，仅在需要时使用
• 浏览器兼容：现代浏览器都支持，但某些旧版本可能需要前缀（-webkit-）
• 嵌套使用：如果有多层 3D 嵌套，每一层都需要设置 preserve-3d

常见应用场景