How to achieve the animation effect of picture rotation in html5

This time I will show you how to achieve the animation effect of the picture turning in html5. What are the precautions for realizing the animation effect of the picture turning in html5. The following is a practical case, let's take a look.

1. Take a look at the effect first:

2. The code is like this:

<img  src="/static/imghwm/default1.png" data-src="images/circle.png" class="lazy" alt="How to achieve the animation effect of picture rotation in html5" >
@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;
    }

The picture used is This: (It’s the white rotating picture)

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to add a prompt icon to the right of the select drop-down box

How to use canvas to implement the custom avatar function

Detailed explanation of Drag and Drop in H5

The above is the detailed content of How to achieve the animation effect of picture rotation in html5. For more information, please follow other related articles on the PHP Chinese website!