1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
section {
width: 500px;
height: 360px;
background: url(images/tfboys.jpg) no-repeat;
margin: 30px auto;
position: relative;
perspective: 1000px;
}
.door-l,
.door-r {
background-color: #9d392a;
position: absolute;
top: 0;
width: 248px;
height: 358px;
border: 1px solid #000;
transition: all 1s ease 0s;
}
.door-l {
transform-origin: left;
left: 0;
}
.door-r {
transform-origin: right;
right: 0;
}
section div::before {
content: "";
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
section:hover .door-l {
transform: rotateY(-130deg);/*往左边翻转为负值*/
}
section:hover .door-r {
transform: rotateY(130deg);/*往右边翻转为正值*/
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
2. 效果图
鼠标悬停