鼠标经过箭头方向缓慢变化

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