CSS3实现可翻转的hover效果

-moz-transform: translateZ(30px) rotateY(360deg) scale(1.1);
}
/*button1 hover效果*/
btn1 {
background-color: #1AAB8A;
color: white;
font-size: 18px;
height: 60px;
width: 150px;
border: 0;
transition: 800ms ease all;
outline: none;
position: relative;
}
btn1:hover {
background: #fff;
color: #1AAB8A;
}
btn1:before, .btn1:after {
content: '';
position: absolute;
height: 2px;
width: 0;
background: #1AAB8A;
transition: 400ms ease all;
}
btn1:before {
right: 0;
top: 0;
}
btn1:after {
left: 0;
bottom: 0;
}
btn1:hover:before, .btn1:hover:after {
width: 100%;
transition: 800ms ease all;
}

2.html

<div id="nav1">
<p>前后翻转</p>
<ul>
<li>
<a>home</a>
</li>
<li>
<a>js</a>
</li>
<li>
<a>jquery</a>
</li>
<li>
<a>div+css</a>
</li>
<li>
<a>css3</a>
</li>
</ul>
</div>
<div id="nav2">
<p>上浮</p>
<ul>
<li>
<a>home</a>
</li>
<li>
<a>js</a>
</li>
<li>
<a>jquery</a>
</li>
<li>
<a>div+css</a>
</li>
<li>
<a>css3</a>
</li>
</ul>
</div>
<div id="nav4">
<p>下浮</p>
<ul>
<li>
<a>home</a>
</li>
<li>
<a>js</a>
</li>
<li>
<a>jquery</a>
</li>
<li>
<a>div+css</a>
</li>
<li>
<a>css3</a>
</li>
</ul>
</div>
<div id="nav3">
<p>左右翻转</p>
<ul>
<li>
<a>home</a>
</li>
<li>
<a>js</a>
</li>
<li>
<a>jquery</a>
</li>
<li>
<a>div+css</a>
</li>
<li>
<a>css3</a>
</li>
</ul>
</div>
<div class="dis-block">
<p>按钮hover效果</p>
<button class="btn1" type="button">hover!</button>
</div> 

效果：