css3d
3d變化是css3的新屬性，可以用來實現一些酷炫的效果。本文以如何搭建乙個立方體為例談談關於3d的個人見解。
頁面座標是三維的，x軸從頁面左邊向右，y軸從頁面上方向下，z軸從頁面裡面向外，和我們以前數學立體幾何中的座標系很相似，只是y軸的方向相反，座標原點預設時圖形中心。需要注意兩點：
1.旋轉角度為正時遵循我自己稱之為的「左手定則」，即左手拇指指向座標軸正方向，旋轉方向就是四指朝向的方向；旋轉角度為負時遵守類似的「右手定則」。
2.旋轉圖形時，旋轉的是座標系，而不是圖形。例如rotatex(90deg)；按照我們的「左手定則」，座標系此時的z軸變為從頁面下方往上，而y軸變為從頁面裡面向外。
構建立體圖形時只需要記住三個層次即可：
1.景深，即perspective，就是我們觀察者視角距離物體的位置。
2.容器，比如構建乙個立方體，立方體有6個面，那麼需要乙個容器，使得轉動這個容器，6個面同時做動作。容器也很簡單，需要新增乙個transform-style:preserve-3d;屬性，不然6個面就會被壓扁到乙個平面上顯示。
3.借用很多人的舞台-容器-演員的說法，我們把立方體的每個面也稱為演員，演員做的事情也很簡單，只需要安排好每個角色的位置和角度即可。
多說無益，下面具體展示一下如何構建乙個立方體。
top
botleft
right
front
back
第一層：
.stage.stage .rect.stage .rect .face
.stage .rect .front
.stage .rect .back
.stage .rect .left
.stage .rect .right
.stage .rect .top
.stage .rect .bot
假如取消景深，是什麼樣的效果？
看起來很奇怪，對吧，因為沒有遵循近大遠小的實際。
假如取消
transform-style:preserve-3d；可以看到，圖形被壓扁在乙個平面上了。
記住三個層次，兩點注意，掌握css3d就是這麼簡單！
CSS3D變換 立方體旋轉效果
3d變換基於幾個比較重要的屬性，perspective,translatez,preserve 3d transform style preserve 3d 建立3d空間 perspective視鏡 perspective origin視鏡基點 x left center right length ...
HTML CSS寫乙個3D立方體
相信有許多的朋友在學3d轉換的時候很懵，或者學完之後想做個小練習獲得成就感鼓勵自己，再或者想更理解透徹。做完這小練習相信大家一定會有所收穫。廢話不多說了，直接開始 html 前後上 下左右相信大家玩過魔方以及在小學的時候學過立方體展開，上面 都能理解。preserve div preserve這裡主...
CSS做3D旋轉魔方（立方體）
css做3d旋轉魔方，使用的是3d位移與旋轉屬性，以及動畫屬性。不多，以下便是全部 立方體title keyframes run 40 70 100 box box div 分別給每個面新增乙個背景圖，並將前後上下左右六個面通過位移與旋轉，放置到對應的位置。f.b.t d.l rstyle head...