灵活运用CSS3中的transform属性以及perspective属性。
1.效果图:
2.代码:
<div class="box">
<div class="box1 box2">正</div>
<div class="box1 box3">反</div>
</div>
.box {
margin: 100px auto;
position: relative;
width: 400px;
height: 200px;
border: 10px solid #000000;
position: relative;
perspective: 600px;
}
.box1 {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 40px;
color: white;
backface-visibility: hidden;
transition: all .6s;
}
.box2 {
transform: rotateY(0deg);
background-color: #0000FF;
}
.box:hover .box2 { transform: rotateY(180deg); }
.box3 {
transform: rotateY(-180deg);
background-color: #006722;
}
.box:hover .box3 { transform: rotateY(0deg); }