CSS 3D 打開透視

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

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

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

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

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

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

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