芝麻開門：把鼠標放在門上，兩扇門同時打開，而且角度是30度，門上的字體一直是倒立的。
思路：
- 設置初始狀態：門關着的時候，字體是倒立的
- 設置結束狀態：門打開角度30度，字體是倒立的
- 使用transition過渡效果，完成動畫。
難點：發現字體倒立要多寫一行代碼，原因是transform的值會把以前的覆蓋掉。
另外，解決代碼塊裏面的顏色設置，直接在 ```後 面加上相應的語言來解決。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>芝麻開門案例</title>
<style type="text/css">
.box{
/*設置門框*/
width:900px;
height:600px;
border:5px solid red;
display:flex;
justify-content:space-between;
margin:100px auto;
/*設置透視點，即人眼位置，也可以不設置，默認爲在遙遠的地方*/
perspective:1000px;
transform-origin:center center;
}
.box div{
/*設置兩扇門的大小及字體*/
width:446px;
height:600px;
border:2px solid red;
color:red;
font-size:80px;
text-align:center;
line-height:600px;
/*對兩扇門設置3D模式*/
transform-style:preserve-3d;
/*把兩扇門的福字倒過來，沒開門時的狀態。必須寫上這句，因爲transform的值會覆蓋掉以前的值，保證頁面打開時門是關着的且字是倒立着。*/
transform:rotateX(180deg);
}
/*設置左邊門*/
.box:hover .left{
/*開門時，左邊門先旋轉30度(Y軸左門框)，後把字進行翻轉180度(x軸)。*/
transform-origin:left center;
/*由於transfom的值會覆蓋上面，所以重新寫一遍*/
transform:rotateY(30deg) rotateX(180deg);
}
/*設置右邊門*/
.box:hover .right{
transform-origin:right center;
transform:rotateY(-30deg) rotateX(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="left">福</div>
<div class="right">福</div>
</div>
</body>
</html>
效果圖如下：
