1.首先是平移的效果。
效果解讀：就是兩扇門往兩邊移動笙什，這樣的效果比較容易制作飘哨。
開門前的效果圖：
image.png
開門后的效果圖：
image.png
看下列代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雙開門</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father {
display: flex;
/* 為了使圖片不變形，我這里的大小和圖片大小一樣 琐凭，大家根據(jù)情況而定*/
width: 1920px;
height: 1080px;
margin: 0 auto;
/* 這里讀者可以填自己的圖片地址 */
background: url(R-C.jpg) no-repeat;
}
.father .left,
.father .right {
width: 50%;
height: 1080px;
/* 這里注意芽隆，其實開門圖是一張圖片，只是這里把它分開统屈，在左右兩個盒子中分別顯示胚吁，可以理解為精靈圖的做法 */
background: url(OIP-C.jpg) no-repeat;
background-size: 1920px 1080px;
transition: all .5s;
}
.father .right {
/* right 表示的取到精靈圖右面的圖片 */
background-position: right 0;
}
/* 2. 鼠標(biāo)懸停的效果：左右移動 */
.father:hover .left {
transform: translate(-100%);
}
.father:hover .right {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="father">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
2.第二種方法是有一種推門的感覺，在這里 要用到第二種屬性愁憔，叫做旋轉(zhuǎn)
在這里讀者簡單的介紹一下旋轉(zhuǎn)的使用腕扶。
旋轉(zhuǎn)
transform: rotate(旋轉(zhuǎn)角度);
取值：角度單位是 deg
-
技巧
取值正負(fù)均可
取值為正，順時針旋轉(zhuǎn)
取值為負(fù)吨掌，逆時針旋轉(zhuǎn)
轉(zhuǎn)換原點(diǎn)
默認(rèn)情況下半抱，轉(zhuǎn)換原點(diǎn)是盒子中心點(diǎn)
transform-origin: 水平原點(diǎn)位置 垂直原點(diǎn)位置;
取值：
方位名詞（left、top膜宋、right窿侈、bottom、center）
像素單位數(shù)值
百分比
因為讀者沒有錄制GIF動態(tài)圖激蹲，不好展示效果棉磨，大家可以復(fù)制代碼，查看效果学辱，謝謝乘瓤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雙開門</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
perspective: 1000px;
}
.father {
display: flex;
/* 為了使圖片不變形，我這里的大小和圖片大小一樣 策泣，大家根據(jù)情況而定*/
width: 1920px;
height: 1080px;
margin: 0 auto;
/* 這里讀者可以填自己的圖片地址 */
background: url(R-C.jpg) no-repeat;
}
.father .left,
.father .right {
width: 50%;
height: 1080px;
background: url(OIP-C.jpg) no-repeat;
background-size: 1920px 1080px;
transition: all .5s;
}
.father .right {
/* right 表示的取到精靈圖右面的圖片 */
background-position: right 0;
}
/* 2. 鼠標(biāo)懸停的效果：左右移動 */
.father:hover .left {
transform-origin: left;
transform: rotateY(90deg);
}
.father:hover .right {
transform-origin: right;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="father">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
