前言
今年是特別的一年，是特別宅的一年，大家都宅在家做貢獻。在這個逆戰時期，讓我們發揮逆戰精神，一起來敲**吧！
正文
今天，我們來做乙個有點小炫酷的3d旋轉立方體相簿。那麼首先，讓我們來了解一下3d。
屬性：perspective
景深（近大遠小），是觀察物體的乙個視角距離，距離越小效果越明顯，它的數值一般為900px-1200px。
使用方法：
perspective：1200px；（在父元素中使用）
transform：perspective（1200px）；（在子元素中使用，但是我們一般不用這種方法）
transform-style
使用方法：
transform-style：preserve-3d；（讓當前元素形成乙個3d空間）
perspective-origin
觀察3d元素的角度（位置）
使用方法：
perspective-origin： left top；
perspective-origin： center center；
perspective-origin： 50% 50%；
perspective-origin： 0px 0px；
功能函式：
translate（）3d位移
使用方法：
transform：translate3d（x,y,z）；
transform：translatex（）；（x軸上的位移）
transform：translatey（）；（y軸上的位移）
transform：translatez（）；（z軸上的位移）
注意：z不能為百分比。
rotate（）3d旋轉
使用方法：
transform：rotate3d（x,y,z,a）；（建議取值0或1，0不旋轉，1旋轉）
scale（）3d縮放
使用方法：
transform：scale3d（x,y,z）；（縮放比例）
transform：scalex（）；（x軸上的縮放）
transform：scaley（）；（y軸上的縮放）
transform：scalez（）；（z軸上的縮放）
注意：
預設值為1，大於1為放大，小於1大於0為縮小；
單獨使用時沒有任何效果，需要配合其他的變形函式一起使用才會有效果。
實現：下面是乙個簡單的3d旋轉立方體相簿
效果
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度 ...
3d實現立方體
3d 俗稱3d變換，指基於3d立體的角度來設定盒子。例如，將盒子設定為立方體。3d的效果跟2d是一樣的，有平移和旋轉，不同點在於，2d只有x軸和y軸，3d會多乙個z軸，用於表示立體。3d的效果通過需要遠距離觀察才能看出立體效果，因為距離太近，我們只能看出平面的2d效果，這就需要在設定3d變換效果之前...