注意：3D轉換中，旋轉前後的X Y Z軸方向就會改變。但只要人對着某個平面位置隨着一起旋轉時，其X Y Z位置相對人時都不會改變。
思路：把6個大小形同的盒子放在一起，然後進行旋轉或平移，得到立方體。
難點：旋轉時的參考標準怎麼解決。
解決方法：對某個立方體的平面進行旋轉時，人和該平面一起旋轉，相對於人來說，其對面的X Y Z軸位置一直沒變。
<!DOCTYPE html>
<html>
<head>
<title>3D立方體</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:grey;
}
.box{
width:500px;
height:300px;
/*border:1px solid red;*/
margin:300px auto;
position:relative;
/*人眼位置也可以不寫，認爲在無限遠的地方*/
/*perspective:800px;
perspective-origin:center center;*/
/*設置模式爲3d模式*/
transform-style:preserve-3d;
/*設置2次角度的旋轉，前後的參考點發生變化，第一次平面座標系的Y軸，第二次是轉動後的X軸，不是原平面座標系的X軸，同時注意左手定則。*/
transform:rotateY(30deg) rotateX(-15deg);
}
.box div{
width:300px;
height:300px;
border:1px solid blue;
position:absolute;
top:0;
left:0;
color:white;
font-size:40px;
transform-style:preserve-3d;
text-align:center;
line-height:300px;
}
.box div:nth-child(2){
/*一個平面在中心位置按照Y軸,根據左手定則(大拇指向下爲Y軸,四指指向爲轉動方向爲正,反之爲負.),先逆時針轉180度,後嚴Z軸平移300px*/
transform:rotateY(180deg) translateZ(300px);
}
.box div:nth-child(4){
/*實測發現，不管是按照原點旋轉，還是按指定位置旋轉，旋轉後的參考位置及方向就改變，*/
/*解決3維空間旋轉後辨別X Y Z軸方向,可把當前平面的X軸爲右手邊,Y軸向下,旋轉時,人也跟着旋轉,則該人面對該平面時的原3維X Y Z軸方向不變/*/
transform:rotateY(270deg) translateX(-150px) translateZ(150px);
}
.box div:nth-child(3){
transform-origin:right center;
transform:rotateY(90deg) translateX(300px);
}
.box div:nth-child(6){
transform:rotateX(-90deg) translateZ(150px) translateY(150px);
}
.box div:nth-child(5){
transform:rotateX(90deg) translateZ(150px) translateY(-150px);
}
</style>
</head>
<body>
<div class='box'>
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
<div class="c6">6</div>
</div>
</body>
</html>
效果如下：
