CSS-3D正方體旋轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋轉正方體</title>
<style type="text/css">
body{width: 100%;}
*{margin: 0px;padding: 0px;}
#div0{
transform-style: preserve-3d;/*構建3D立體圖形必須設定preserve-3d*/
perspective: 1000px;
perspective-origin: 800px 0px;
/*可設定X\Y方向的視角，Z方向由perspective()決定。*/
width:50%;margin: 100px auto;
animation-name: rotate3D;
animation-delay: 1s;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.div1{width: 300px;height: 300px;border: 1px solid red;
transform-origin:left top; position: absolute;}
#back{background: rgba(100,100,100,0.5);}
#top{transform: rotateX(90deg);background: rgba(0,0,220,0.5);}
#bottom{transform:rotateX(90deg) translateZ(-300px);
background: rgba(0,230,130,0.5);}
#front{transform: translateZ(300px);background: rgba(100,0,100,0.5);}
#left{transform: rotateY(-90deg);background: rgba(100,100,0,0.5);}
#right{transform: rotateY(-90deg) translateZ(-300px);background: red}
@keyframes rotate3D{
from{transform: rotate3d(0,0,0);}
to{transform: rotate3d(1,1,1,360deg);}
}
</style>
</head>
<body>
<div id="div0">
<div class="div1" id="back"></div>
<div class="div1" id="top"></div>
<div class="div1" id="bottom"></div>
<div class="div1" id="front"></div>
<div class="div1" id="left"></div>
<div class="div1" id="right"></div>
</div>
</body>
</html>
專案重點：
1、學習掌握3D圖形的transform變形，包括rotate 3D旋轉，translate 3D移位。
2、學習掌握perspective的用法，包括perspective-orgin（X,Y）的用法，及perspective（xxpx）的用法。前者用於設定觀看點，通過不同位置的觀看能夠看到不一樣的立體圖形，X代表X軸方向的位置，Y代表Y軸方向的位置；Z方向的位置可通過perspective（）來設定，也叫視距。視距越大，立體效果越不明顯。
專案難點：
1、首先需要了解X、Y、Z座標體系，建立一個3D座標體系。
2、需要了解構建3D立體圖形的前提是設定transform-style: preserve-3d;（通過測試，不設定也可以）
具體思路：
第一步：通過對正方體前、後、左、右、上、下六個平面進行transform變形實現正方體的構建；
通過對back平面進行Y軸旋轉得到left，通過對back平面進行X軸旋轉得到bottom，通過對back進行Z軸方向平移得到front，通過對left進行X軸方向平移得到right。
第二步：通過關鍵幀動畫設定初始狀態及結束狀態，對正方體旋轉進行控制。
設定animation的name、durantion、delay、iteration-count屬性，設定動畫的名稱、持續時間、延時、及旋轉次數。