css3旋转动画

html

<div class="rotate_bg">
    <img class="rotateImages" src="images/01.png" />
</div>

css

.rotate_bg{ 
    width: 500px; 
    height: 500px; 
    background: #59d1b6; 
    margin: 200px auto; 
}
.rotate_bg img.rotateImages{
    -webkit-animation:myRotate 10s linear infinite;
    animation:myRotate 10s linear infinite;
}
@-webkit-keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
@keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}

效果图