如何转换子元素保留 3D 转换？

当我们在进行 3D 变换时，想要保留子元素的 3D 变换，就需要使用 transform-style: preserve-3d; 这个属性来保留子元素的 3D 变换。这个属性适用于嵌套元素的情况，当我们要在父元素上应用 3D 变换时，其子元素也会跟随变化，但是如果不加这个属性，则子元素的 3D 变换不会被保留。

解决方法

要解决这个问题，需要在父元素上使用 transform-style: preserve-3d; 属性来保留子元素的 3D 变换。下面是一个使用 transform-style: preserve-3d; 的代码片段：

.parent {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

.child {
  transform: rotateY(-45deg);
}

这个示例中，我们在父元素 .parent 上使用 transform-style: preserve-3d; 属性来保留子元素的 3D 变换，并在其中应用了一个 rotateY(45deg) 的变换。子元素 .child 也应用了一个 rotateY(-45deg) 的变换，但是这个变换会保留在父元素的变换之后，因为父元素使用了 transform-style: preserve-3d; 属性。

总结

在进行 3D 变换时，要保留子元素的 3D 变换，需要在父元素上加上 transform-style: preserve-3d; 属性来保留子元素的 3D 变换。这个属性适用于嵌套元素的情况。