css transform360度旋轉 外邊旋轉內容不旋轉

html：

<div class="wrap_">
    <ul>
        <li class="one_"><a href="">360旋轉</a></li>
    </ul>
</div>

css：

.wrap_ ul li:hover{
    border-style:dashed;
    -webkit-animation: spinAround 9s linear infinite;
    -moz-animation: spinAround 9s linear infinite;
    animation: spinAround 9s linear infinite;
}
.wrap_ ul li:hover a{
    -webkit-animation: spinAround1 9s linear infinite;
    -moz-animation: spinAround1 9s linear infinite;
    animation: spinAround1 9s linear infinite;
}
@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinAround1 {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
@-moz-keyframes spinAround1 {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(-360deg);
    }
}
@keyframes spinAround1 {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(-360deg);
    }
}
注：1.外邊div正轉360，內部元素倒轉-360，和外部正傳相抵消，不轉；
       2.rotate旋轉屬性；
       3.兼容性；