巧用css3轻松实现箭头上下旋转

巧用css3的transform-origin、transform和transition属性轻松实现箭头上下旋转效果。看代码：

<ul class="test">
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
</ul>

只要css就可以实现，对做前端的来说简直是福音啊！O(∩_∩)O哈哈~

.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;
}

本代码不支持ie8及以下浏览器。