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

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

只要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及以下浏览器。