一个鼠标悬停后上下翻动的效果!(没办法录制gif图,只能鼠标悬停时截图,见谅一下啦🤦)
<style>
.content{
position:relative;
}
.content>div{
position:absolute;
top:0;
left:0;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
transition: .2s;
transform-style:preserve-3d;
}
.hover-b{
transform-origin: 50% 0%;
background:#000;
color:#fff;
}
.hover-w{
top:-50px;
transform: rotateX(-90deg);
transform-origin: 50% 0%;
}
.content:hover .hover-b{
top:50px;
transform:rotateX(90deg);
}
.content:hover .hover-w{
top:0;
transform:rotateX(0deg);
}
</style>
<div class="content">
<div class="hover hover-w">
<span>HOVER</span>
</div>
<div class="hover hover-b">
<span>HOVER</span>
</div>
</div>