CSS3 3D變換功能允許在3D空間中變換元素。
一、元素的3D轉換
使用CSS3 3D變換功能，可以對三維空間中的元素執行基本的變換操作。如移動，旋轉，縮放和傾斜。
變換後的元素不會影響周圍的元素，但可以像絕對定位的元素一樣將它們重疊。但是，變換後的元素在其默認位置（未變換）仍會在佈局中佔用空間。
二、使用CSS變換和Transform()函數變換功能
CSS3 transform屬性使用變換功能來操縱元素使用的座標系，以便應用變換效果。
案例描述了3D變換功能。
1. translate3d()
rotation3d()函數將3D空間中的元素圍繞[x，y，z]方向向量爲圓點旋轉指定角度。這可以寫成rotate(vx，vy，vz，angle)。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項目</title>
<style>
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px);
/* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px);
}
img {
width: 125px;
height: 125px;
}
</style>
</head>
<body style="background-color: aqua;">
<h2>Before Translation:</h2>
<div class="container">
<img src="timg.jpg" alt="Diamond Card">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="timg.jpg" class="transformed" alt="Diamond Card">
</div>
</body>
</html>
該功能translate3d(25px, 25px, 50px)將圖像沿X和Y軸正方向移動25個像素，並沿Z軸正方向移動50個像素。
注：
3D變換使用三維座標系，但是沿Z方向的移動並不總是很明顯，因爲這些元素存在於二維平面（平面）上並且沒有深度。
通過使Z軸上較高的元素（即距觀看者更近的元素看起來較大，而離觀看者更遠的元素看起來更小），可以使用perspective和perspective-origin的CSS屬性爲場景添加深度感。
注意：
如果對一個元素應用3D變換而不設置透視，結果將不會顯示爲三維效果。
2. rotate3d()
該rotate3d()函數圍繞[x，y，z]方向向量將3D空間中的元素旋轉指定角度。可以寫成rotate(vx, vy, vz, angle)。
例：
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg);
}
img {
width: 125px;
height: 125px;
}
該功能rotate3d(0, 1, 0, 60deg)將圖像沿Y軸旋轉60度。也可以使用負值沿相反方向旋轉元素。
3. scale3d()
scale3d()函數更改元素的大小。可以寫成scale(sx, sy, sz)。除非將其與旋轉和透視圖等其他變換功能結合使用，否則此功能的效果並不明顯。
例：
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);
}
img {
width: 125px;
height: 125px;
}
運行結果：
函數scale3d(1, 1, 2)沿Z軸縮放元素，函數rotate3d(1, 0, 0, 60deg)沿X軸旋轉圖像60度。
4. matrix3d()
matrix3d()功能可以一次執行所有3D轉換，例如平移，旋轉和縮放。它採用4×4轉換矩陣]形式的16個參數。
這是使用matrix3d()功能執行3D轉換的示例。
示例
.container {
但是，一次執行多個轉換時，使用單個轉換函數並按順序列出它們會更方便，如下所示：
示例
.container {
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}
.transformed {
-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
/* Chrome, Safari, Opera */
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
img {
width: 125px;
height: 125px;
}
三、總結
本文基於CSS基礎，教讀者如何去進行2D->3D的轉換，介紹了常見的的幾個方法。去進行移動、縮放、轉動、拉長或拉伸等一系列操作。使用Html語言，使用豐富的案例，以及效果圖的展示。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，纔可以理解的更加深刻。
希望能夠幫助你學習。