html:
<ul class="test">
<li><a href="#"></a></li>
</ul>
css：
.test{margin:0;padding:0;list-style:none;border:1px solid #000;}
.test li{height:50px;background:#fff;text-align:center;}
.test li a{
border:3px solid #666;
border-width:3px 0 0 3px;
display:inline-block;
height:8px;
-moz-transform-origin:center center;
-moz-transform:rotate(45deg);
-moz-transition:all .5s ease-in .1s;
-webkit-transform-origin:center center;
-webkit-transform:rotate(45deg);
-webkit-transition:all .5s ease-in .1s;
-o-transform-origin:center center;
-o-transform:rotate(45deg);
-o-transition:all .5s ease-in .1s;
-ms-transform-origin:center center;
-ms-transform:rotate(45deg);
-ms-transition:all .5s ease-in .1s;
transform-origin:center center;
transform:rotate(45deg);
transition:all .5s ease-in .1s;
width:8px;}
.test li a:hover{
-moz-transform:rotate(-15deg);
-moz-transition:all .5s ease-in .1s;
-webkit-transform:rotate(225deg);
-webkit-transition:all .5s ease-in .1s;
-o-transform:rotate(-45deg);
-o-transition:all .5s ease-in .1s;
-ms-transform:rotate(-45deg);
-ms-transition:all .5s ease-in .1s;
transform:rotate(-45deg);
transition:all .5s ease-in .1s;
}
