css3 360度动态旋转效果

只有旋转动效：

.only-rotate{
  -webkit-transform: rotate(360deg);
  animation: onlyRotation 3s linear infinite;
  -moz-animation: onlyRotation 3s linear infinite;
  -webkit-animation: onlyRotation 3s linear infinite;
  -o-animation: onlyRotation 3s linear infinite;
}

@-webkit-keyframes onlyRotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}

动效+位置变换等复合效果写法：

.rotate_img{
  -webkit-transform: translate(-50%, -50%) rotate(360deg);
  animation: rotation 8s linear infinite;
  -moz-animation: rotation 8s linear infinite;
  -webkit-animation: rotation 8s linear infinite;
  -o-animation: rotation 8s linear infinite;
}
@-webkit-keyframes rotation{
  from {-webkit-transform: translate(-50%, -50%) rotate(0deg);}
  to {-webkit-transform: translate(-50%, -50%) rotate(360deg);}
}