css记录：三维变化之transform-style

transform-style 是 CSS 3D 转换中的一个重要属性，它定义了嵌套元素如何在 3D 空间中呈现。当你对一个元素应用 3D 转换（如 rotateX(), rotateY(), rotateZ(), translateZ() 等）时，这个元素的子元素默认会在 2D 平面上进行转换，而不是在 3D 空间中。transform-style 属性允许我们改变这种行为，使得子元素也能在 3D 空间中进行转换。

语法

transform-style: flat | preserve-3d;

• flat：默认值。表示子元素不会保留其 3D 位置，而是在 2D 平面上进行渲染。
• preserve-3d：表示子元素将在 3D 空间中进行渲染，并保留其 3D 转换。

深入解析

1. 2D 与 3D 渲染的区别：
   当 transform-style 设置为 flat 时，子元素在 3D 转换中会被“压平”到其父元素的 2D 平面上进行渲染。这意味着子元素的 Z 轴位置（即深度）会被忽略，所有子元素都会显示在同一平面上。而当 transform-style 设置为 preserve-3d 时，子元素会保留其在 3D 空间中的位置，形成真正的 3D 效果。

2. 应用场景：

   • preserve-3d 在创建复杂的 3D 场景时非常有用，比如 3D 导航菜单、3D 立方体、3D 画廊等。在这些场景中，我们通常需要多个元素在 3D 空间中相互堆叠、旋转和移动。
   • 当你只需要简单的 2D 转换时，可以使用 flat 值，但大多数情况下，为了创建更逼真的 3D 效果，我们会选择 preserve-3d。

3. 如何使用：
   通常，transform-style 会应用于包含多个需要进行 3D 转换的子元素的父元素。例如，要创建一个可以翻转的 3D 卡片，你需要将 transform-style 设置为 preserve-3d，并在卡片的正面和背面分别应用 3D 转换。

   .card {
     perspective: 1000px;
     transform-style: preserve-3d;
     transition: transform 0.5s;
   }
   
   .front, .back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
   }
   
   .front {
     background: red;
     z-index: 2;
   }
   
   .back {
     background: blue;
     transform: rotateY(180deg);
   }
   
   .card.flipped {
     transform: rotateY(180deg);
   }
   

   在这个示例中，.card 是父元素，它的 transform-style 设置为 preserve-3d，以便在翻转时保持子元素（.front 和 .back）的 3D 位置。.front 和 .back 分别表示卡片的正面和背面，它们都有各自的 3D 转换（虽然 .front 在这个例子中并没有显式的 3D 转换，但它仍然是一个 3D 元素）。

4. 注意事项：

   • transform-style 属性仅对设置了 3D 转换的元素有效。如果元素没有应用 3D 转换，则该属性将无效。
   • 在某些旧版浏览器中，transform-style 可能不受支持或存在兼容性问题。因此，在使用该属性时，最好检查目标浏览器的兼容性情况。
   • transform-style 和 perspective 通常一起使用，以创建具有透视效果的 3D 场景。perspective 定义了观察者距离 Z=0 平面的距离，而 transform-style 决定了子元素是否保留 3D 位置。