3d小盒子：
記憶點：
① perspective:500px; 透視效果。
顯示3d透視效果，需要配合父元素添加transform-style:preserve-3d;
在旋轉時才能在3d空間變換顯示。
②x軸，y軸，z軸的旋轉後的移動，始終是根據自身的Z軸移動。
transform:rotateY(0deg) translateZ(100px);
<style>
body{
/* 單獨設置了perspective屬性只是讓這個標籤元素在2d的平面上展示3d效果，
如果hover裏設置了旋轉，就是進入了3D效果空間，看不到3D變換效果。
問題解決：將3d變換的 父元素 添加一個transform-style：屬性 即可看到3d的變換效果。 */
perspective:500px;
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
position: relative;
transition:all 5s;
transform-style:preserve-3d;/* 此處添加給3d變換的 父元素。 */
}
.box .item{
width: 100%;
height: 100%;
font-size: 150px;
text-align: center;
line-height: 200px;
font-weight: 900;
position: absolute;
}
.item:nth-child(1){
background-color: orange;
transform:rotateY(0deg) translateZ(100px);
}
.item:nth-child(2){
background-color: red;
transform:rotateY(180deg) translateZ(100px);
}
.item:nth-child(3){
background-color: yellowgreen;
transform:rotateY(90deg) translateZ(100px);
}
.item:nth-child(4){
background-color: yellow;
transform:rotateY(-90deg) translateZ(100px);
}
.item:nth-child(5){
background-color: skyblue;
transform:rotateX(-90deg) translateZ(100px);
}
.item:nth-child(6){
background-color: pink;
transform:rotateX(90deg) translateZ(100px);
}
.box:hover{
transform:rotateX(450deg) rotateY(450deg);
}
</style>
</head>
<body>
<!-- div.box>div.item$*4 -->
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>