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效果，以及進行層疊、渲染優化等操作，讓我們的網頁更加炫酷生動。