<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;
left-border: Solid 2px # 333;
Transform-Origin: right; / * set the cassette is rotated in the right side * /
}
.door {L-
left: 0;
border-right: 2px Solid # 333;
Transform-Origin: left; / * set the cassette is rotated in the left side * /
}
.door-L :: before,
.door :: before {-R & lt
Content: "";
position: Absolute;
Top: 50%;
width: 20px;
height: 20px;
border : Solid 1px # 000;
border-RADIUS: 50%;
Transform: translateY, (-50%); / * set the cassette in the vertical direction * /
}
.door-R & lt before :: {
left: 5px;
}
.door-L :: before {
right: 5px; / * set the position of the door catch * /
}
.door: hover {.door-L
Transform: rotateY (-130deg);
}
.door: hover {R & lt .door-
Transform: rotateY (130deg); / * disposed at an angle door is rotated along the Y axis * /
}
</ style>
</ head>
<body>
<div class = "door">
<div class = "door-L"> </ div>
<div class = "door -r "> </ div>
</ div>
</ body>