通過對於HTML5的學習，實現一個具有透視效果的立方體盒子：
具體實現方法如下
- 我們需要先生成6個面，並添加樣式
- 由於transform變換后會回到原始狀態，因此必須添加3d變換效果
/*讓子元素保留3d變換效果*/
transform-style: preserve-3d;- 為了方便觀看，再添加一個旋轉效果
- 之后只需要將前后面分別平移，左右上下面移動再旋轉就可以實現，比較重要的就是的注意旋轉方向，根據左手定則而定。
3D坐標系
旋轉的方向：（左手法則）
左手握住旋轉軸，豎起拇指指向旋轉軸的正方向，正向就是其余手指卷曲的方向。
所有的3d旋轉，對着正方向去看，都是順時針旋轉。
透視效果
/*添加透視景深效果*/
perspective: 1px;通過改變其值，我們可以看到一個從盒子內部視角到外部視角的效果。
/*設置透視的觀察角度*/
perspective-origin: 0px 0px;通過設置x點的值，可以實現左右視角觀測立方體，設置y點的值，可以實現上下視角觀測立方體，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立體盒子</title>
<style>
.box{
height:200px;
width: 200px;
margin: 100px auto;
position: relative;
transform: rotate3d(1,1,0,-30deg);
/*讓子元素保留3d變換效果*/
transform-style: preserve-3d;
/*添加透視景深效果*/
perspective: 1px;
/*設置透視的觀察角度*/
perspective-origin: 0px 0px;
}
.box > div{
width: 200px;
height: 200px;
position: absolute;
opacity: 0.6;
}
.front{
background-color: red;
/*變化完畢后會回到原始狀態*/
transform: translateZ(100px);
}
.back{
background-color: yellowgreen;
transform: translateZ(-100px) rotateY(180deg);
}
.left{
background-color: grey;
/*移動加旋轉*/
transform: translateX(-100px) rotateY(-90deg);
}
.right{
background-color: magenta;
transform: translateX(100px) rotateY(90deg);
}
.top{
background-color: deepskyblue;
transform: translateY(-100px) rotateX(90deg);
}
.bottom{
background-color: peachpuff;
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>