Home  >  Article  >  Web Front-end  >  How to achieve the animation effect of picture rotation in html5

How to achieve the animation effect of picture rotation in html5

php中世界最好的语言
php中世界最好的语言Original
2018-03-27 13:35:295729browse

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:

How to achieve the animation effect of picture rotation in html5

2. The code is like this:

<img  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)

How to achieve the animation effect of picture rotation in html5

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn