CSS3實現透視效果

CSS3的透視效果可以讓元素在三維空間中呈現出立體感。

要開啟透視效果，需要先設置元素的父級容器屬性：transform-style: preserve-3d; 這樣可以讓子元素在父容器的三維坐標系中呈現，否則子元素將直接堆疊在一起。

接著，通過 transform 屬性來繞著 X 、 Y 、 Z 軸旋轉元素，從而產生透視效果。

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

上面的代碼將子元素繞著 Y 軸旋轉 45 度，產生一個傾斜的透視效果。

除了繞軸旋轉，還可以通過 perspective 屬性調整透視點的位置，從而影響透視效果的強度。

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

在上面的代碼中，我們設置了透視點距離視點的距離為 800 像素，從而產生更加強烈的透視效果。

使用 CSS3 的透視效果可以給元素增加更加立體的視覺效果，可以用于制作 3D 游戲、網站廣告海報等。