美文网首页
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