CSS3 How to make pictures to achieve the effect of continuous rotation? Detailed

This article will give you a detailed description of how to use CSS3 to make the picture to achieve a continuous rotation of the effect, we are in the page design, often encounter a variety of pictures of the problem, such as the need to let the picture fillet display, image Click to enlarge the display and so on effect.

In the previous article I also gave you a picture of the specific method of fillet display, you can also refer to this article "CSS How to control the image of arbitrary fillet style?" 】

The following is mainly to introduce the use of CSS3 to achieve automatic cycle 360 rotation of the specific method

The HTML code example is as follows:

<div class= "Demo" >    </div>"

The animated code example of a CSS picture rotated 360 degrees is as follows:

. demo{text-align:center;    margin-top:100px;} @-webkit-keyframes rotation{from    {-webkit-transform:rotate (0deg);}    to {-webkit-transform:rotate (360deg);}}. an{    -webkit-transform:rotate (360deg);    Animation:rotation 3s linear infinite;    -moz-animation:rotation 3s linear infinite;    -webkit-animation:rotation 3s linear infinite;    -o-animation:rotation 3s linear infinite;}. img{border-radius:250px;}

The above code can be directly copied and pasted locally for testing, then through the browser access, the effect is as follows:

Because the upload image is limited in size, GIF compression may cause the picture to not rotate. But normally, it rotates at the specified time, and we're going to notice the animation property, which is the shorthand attribute for all animated properties. We have added the transform and animation style attributes to the IMG image, which makes the picture 360-degree rotation animation effect.

CSS animated pictures automatically rotate the effect of the implementation method, as described above. Most animation effects can be achieved by mastering the transform and animation properties in CSS. Their principles are basically similar.

So the above is about how to use CSS3 to achieve automatic rotation of the picture 360-degree animation effect of the specific method. Have a certain reference value, hope to have the help of friends in need!