transform-style的完全解析

一、开启3D效果

transform-style属性可以用来定义3D转换的子元素是平面的还是立体的。默认情况下，子元素是平面的。如果要开启3D效果，需要将transform-style属性设置为“preserve-3d”。

/* 开启3D效果 */ 
.container {
  transform-style: preserve-3d;
}

使用preserve-3d属性时，任何嵌套在具有3D转换的元素内的子元素都将继承转换效果。以下代码展示了一个包含子元素的例子：

<div class="container">
  <div class="box"></div>
</div>

/* 开启3D效果 */ 
.container {
  transform-style: preserve-3d;
}

.box {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: rotateY(30deg);
}

上述代码中，container是父元素，使用了preserve-3d属性开启了3D效果。box是container的子元素，同时也拥有了3D转换效果。

结果：

二、preserve-3d属性

preserve-3d属性会直接继承祖先元素的transform属性而不会合并。

如果把祖先元素中的preserve-3d属性去掉，那么子元素的3D转换将无法起作用，因为父元素的transform-style属性默认为faat。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

/* 关闭3D效果 */ 
.container {
  transform-style: flat;
}

.box1 {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: rotateY(30deg);
}

/* 开启3D效果的写法，不需要preserve-3d属性 */ 
.box2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  transform: rotateY(30deg);
}

结果：

三、实现层叠效果

preserve-3d属性可以用于创建层叠的效果，这类效果与图层类似，可以让元素产生3D效果，使元素在Z轴上堆叠起来。

为了使元素在Z轴上具有层次感，需要将子元素上的translateZ属性设置为正整数，并使用z-index属性进行控制。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

.container {
  transform-style: preserve-3d;
}

.box1 {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: translateZ(50px);
  position: absolute;
  z-index: 3;
}

.box2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  transform: translateZ(20px);
  position: absolute;
  z-index: 2;
}

.box3 {
  height: 100px;
  width: 100px;
  background-color: green;
  transform: translateZ(0);
  position: absolute;
  z-index: 1;
}

结果：

四、增加渲染性能

使用preserve-3d属性可能会导致一些性能问题，特别是在高复杂度的场景中。为了避免这些问题，可以在祖先元素上添加backface-visibility属性，并将其设置为hidden。

backface-visibility属性主要是定义当元素不面对屏幕时是否可见。默认情况下，backface-visibility属性为visible，即使元素不可见。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

/* 开启3D效果 */ 
.container {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.box1 {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: rotateY(30deg);
}

.box2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  transform: rotateY(30deg);
}

结果：

五、总结

通过对transform-style属性的掌握，我们能够轻松开启3D效果，以及进行层叠、渲染优化等操作，让我们的网页更加炫酷生动。