3d： 俗稱3d變換，指基於3d立體的角度來設定盒子。例如，將盒子設定為立方體。3d的效果跟2d是一樣的，有平移和旋轉，不同點在於，2d只有x軸和y軸，3d會多乙個z軸，用於表示立體。3d的效果通過需要遠距離觀察才能看出立體效果，因為距離太近，我們只能看出平面的2d效果，這就需要在設定3d變換效果之前，
需要先設定 景深： css: perspective: 1200px; /* 在父元素中使用,設定景深 */
同時，我們還需要設定從螢幕的哪個點來觀察螢幕內部的3d效果：
css: perspective-origin: 50% 50%;
對於3d的效果來講，同樣具有平移和旋轉，但因為平移和旋轉同樣適用於2d效果，所以我們還需要告訴瀏覽器當前場景是在3d效果下進行的：
css: transform-style：preserve-3d;
/* 表示在3d空間中展示 */ 旋** 旋轉指讓盒子繞著x軸或y軸進行旋轉。
語法：css: transform: rotatex(旋轉的角度); /* 繞著x軸旋轉多少角度 */ transform: rotatey(旋轉的角度); /* 繞著y軸旋轉多少角度 */ transform: rotatez(旋轉的角度); /* 繞著z軸旋轉多少角度 */
平移: 平移是讓盒子在水平方向或垂直方向進行移動。
語法：css: transform: translatex(畫素值); /* 水平方向移動，正值向右，負值向左 */ transform: translatey(畫素值); /* 垂直方向移動，正值向下，負值向上 */ transform: translatez(畫素值); /*
z軸方向移動，正值距離眼睛更近，負值距離眼睛更遠 */ transform: translate3d(水平方向畫素值, 垂直方向畫素值, z軸方向畫素值); /* 復合寫法 */
css樣式**：
.box
.box>div
.box div:nth-child(1)
.box div:nth-child(2)
.box div:nth-child(3)
.box div:nth-child(4)
.box div:nth-child(5)
.box div:nth-child(6)
.box:hover
主體**：12
3456
運動過程的效果：
3D 旋轉立方體
source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...
3D立方體旋轉
1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...
純CSS實現3D立方體效果
c keyframes zhuanto a.b d.e f.g style class c class a 正面div class b 右面div class d 左面div class e 背面div class f 頂面div class g 底面div div 注意 要實現3d效果首先必須設定...