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.兼容性；

css transform360度旋转 外边旋转内容不旋转

原文地址：http://www.cnblogs.com/HONGYE1994/p/8012267.html