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

标签：ul li   兼容   mat   anim   web   form   css   order   inf   

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度旋转 外边旋转内容不旋转

标签：ul li   兼容   mat   anim   web   form   css   order   inf   

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