<style>
.door {
width: 288px;
height: 153px;
border: 2px solid #333;
margin: 150px auto;
background: url(../img/01.png) no-repeat;
position: relative;
perspective: 500px; /* 设置盒子透明 */
}
.door-l,
.door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: pink;
transition:all 1s; /* 盒子过渡效果 */
}
.door-r{
right: 0;
border-left: 2px solid #333;
transform-origin:right; /* 设置盒子沿right边旋转 */
}
.door-l {
left: 0;
border-right: 2px solid #333;
transform-origin:left; /* 设置盒子沿left边旋转 */
}
.door-l::before,
.door-r::before {
content: "";
position: absolute;
top:50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform:translateY(-50%); /* 设置盒子垂直方向 */
}
.door-r::before{
left:5px;
}
.door-l::before{
right:5px; /* 设置门扣的位置 */
}
.door:hover .door-l{
transform:rotateY(-130deg);
}
.door:hover .door-r{
transform:rotateY(130deg); /* 设置门沿Y轴旋转的角度 */
}
</style>
</head>
<body>
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
