个人博客 http://www.sharedblog.cn/?post=68
CSS代码
<style type="text/css">
div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
margin:0;
padding:0;
}
body{
width: 100%;
background: black;
}
.box{
position: relative;
text-align: center;
width: 300px;
height: 300px;
margin: 50px auto;
}
.box a{
display: block;
width: 300px;
height: 300px;
position: absolute;
line-height: 300px;
text-decoration: none;
font-size: 60px;
color: #fff;
transition: all 3s;
backface-visibility: hidden;
}
.a{
background: red;
}
.b{
background: blue;
transform: rotateY(180deg);
}
.box:hover .a{
transform: rotateY(180deg);
}
.box:hover .b{
z-index: 2;
transform: rotateY(360deg);
}
</style>HTML代码
<body>
<div class="box">
<a class="b" href="#">反</a>
<a class="a" href="#">正</a>
</div>
</body>