美文网首页
css3 实现360度无线旋转

css3 实现360度无线旋转

作者: 代码使劲儿搬 | 来源:发表于2021-07-14 11:57 被阅读0次

使用css3 属性方法 rotate() 实现旋转

.icon {
  -webkit-animation: animal 1s infinite linear ;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
@-webkit-keyframes animal {
  0%{
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100%{
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

transform-origin是规定如何旋转
: center center;为以围绕中心点旋转;
top left; 以围绕左上角旋转;
top right; 以围绕右上角旋转;

相关文章

网友评论

      本文标题:css3 实现360度无线旋转

      本文链接:https://www.haomeiwen.com/subject/bgkypltx.html