Introduction to the implementation method of the animation effect of making pictures rotate in html5

1. Take a look at the effect first:

2. The code is like this:

The picture used by

<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
    @keyframes btnRotate{
        from{transform: rotateZ(0);}
        to{transform: rotateZ(360deg);}
    }
}
@include ani-btnRotate;
#circle{
    position: absolute;
    left: 50%;
    width: REM(338);
    height:  REM(338);
    margin-top: REM(200);
    margin-left: REM(-338/2);
    transform-origin: center center ;
    animation: btnRotate 1s 1s linear forwards;
    }

is this: (It is the white rotating picture)

The above is the detailed content of Introduction to the implementation method of the animation effect of making pictures rotate in html5. For more information, please follow other related articles on the PHP Chinese website!