CSS 3D 打開透視

CSS 3D 包含了一些強大的特性，其中包括 transform-style 和 perspective。這些特性讓我們能夠將 Web 上的內容進行 3D 轉換。而其中的透視效果就是其中最常見的效果之一。如果你想要嘗試實現這種效果，那么請繼續閱讀下去。

.box {
transform-style: preserve-3d;
perspective: 1000px;
}

transform-style 屬性指定了如何對子元素應用 3D 轉換。preserve-3d 的值意味著相對于 父容器 進行 3D 變換。這對于制作復雜的 3D 場景非常有用。

perspective 屬性定義了觀察者距離被觀察對象的距離。它為元素和其子元素提供了透視效果。在這個例子中，我們指定透視距離為 1000px。

.item {
transform: translateZ(-100px);
}

現在我們已經設置好了父容器的透視效果，但是其子元素仍然像以前一樣呈現。因為這時它們還未被應用任何 3D 轉換。通過在子元素上使用 transform 屬性，我們可以將它們移動到 Z 軸上，并模擬出 3D 效果。

在這個例子中，我們將子元素移動到了與「觀察者」相對的位置上。這樣，元素就會向外翻轉，而不是向內傾斜。