CSS3 中的 3D 轉換提供了一種在二維屏幕上呈現三維效果的方式，主要包括translate3d、rotate3d、scale3d等轉換函數，下面來詳細介紹：

1. 3D 轉換的基本概念

坐標系
在 CSS3 的 3D 空間中，使用的是右手坐標系。X 軸是水平方向（從左到右為正方向），Y 軸是垂直方向（從上到下為正方向），Z 軸是垂直于屏幕的方向（從屏幕外指向屏幕內為正方向）。
容器屬性 - perspective
這個屬性用于設置 3D 元素的透視效果。簡單來說，它定義了觀察者與 3D 場景之間的距離，單位通常是像素。較小的perspective值會使 3D 效果更加強烈，元素看起來更大、更靠近觀察者；較大的值則會使 3D 效果比較平緩。
例如：perspective: 1000px;
一般將perspective屬性應用于 3D 轉換元素的父容器，這樣所有子元素都會共享這個透視效果。
容器屬性 - transform - style
transform - style屬性用于指定子元素如何在 3D 空間中呈現。它有兩個主要的值：flat和preserve - 3d。
flat（默認值）：子元素將被視為在二維平面上進行轉換，忽略任何 3D 效果。
preserve - 3d：子元素將在 3D 空間中進行轉換，這使得可以創建復雜的 3D 結構。
例如：transform - style: preserve - 3d;

2. 3D 轉換函數

translate3d(x, y, z)
功能：沿著 X、Y、Z 軸移動元素。
參數：x、y、z分別表示在 X 軸、Y 軸、Z 軸方向上的移動距離，單位可以是像素（px）、百分比（%）等。例如，translate3d(100px, 50px, 20px)將元素在 X 軸方向移動 100px，在 Y 軸方向移動 50px，在 Z 軸方向移動 20px。
示例：

.element {transform: translate3d(50px, 0, 0);
}

上述代碼將使.element這個元素在 X 軸正方向移動 50px。
rotate3d(x, y, z, angle)
功能：圍繞指定的軸在 3D 空間中旋轉元素。
參數：x、y、z是旋轉軸向量的分量（取值范圍是 0 - 1），angle是旋轉的角度，單位是弧度（rad）或度（deg）。例如，rotate3d(1, 0, 0, 90deg)表示圍繞 X 軸旋轉 90 度。
示例：

.element {transform: rotate3d(0, 1, 0, 45deg);
}

代碼使元素圍繞 Y 軸旋轉 45 度。
功能：在 3D 空間中縮放元素。
參數：x、y、z分別是在 X 軸、Y 軸、Z 軸方向上的縮放比例。例如，scale3d(2, 2, 2)將使元素在三個軸方向上都放大兩倍。
示例：

.element {transform: scale3d(1.5, 1.5, 1.5);
}

這會讓元素在 3D 空間中整體放大 1.5 倍。

3. 3D 轉換的應用場景

3D 相冊效果
可以通過將一組照片元素使用translate3d和rotate3d進行布局和旋轉，配合perspective屬性營造出 3D 相冊的效果。用戶可以通過鼠標交互（如鼠標移動或點擊）來切換照片的顯示角度，實現逼真的 3D 相冊瀏覽體驗。
3D 產品展示
對于電商網站上的產品展示，利用 3D 轉換可以讓用戶從不同角度查看產品細節。例如，將產品模型的各個部分分別進行 3D 轉換，使顧客可以通過旋轉或縮放操作查看產品的各個面，就像在現實生活中拿著產品查看一樣。
通過合理運用 CSS3 的 3D 轉換，可以為網頁添加豐富的視覺效果，增強用戶體驗。