How to make images rotate continuously in css3? 【Detailed explanation】

This article will give you a detailed introduction to how to use css3 to achieve the effect of continuous rotation of images. When we design web pages, we often encounter various problems related to image display. For example, some need to make images round. Corner display, click on the picture to enlarge the display and other effects.

In the previous article, I also introduced to you the specific method of displaying rounded corners of images. You can also refer to this article [How to control the random rounded corner style of images with css? 】

The following mainly introduces to you the specific method of using css3 to realize automatic 360-degree rotation of images

HTML code examples are as follows:

<div class="demo">
    <img  class="an img lazy"  src="/static/imghw/default1.png"  data-src="/test/img/2.png"       style="max-width:90%"  style="max-width:90%"/ alt="How to make images rotate continuously in css3? 【Detailed explanation】" >
</div>

css picture An example of the animation code for rotating 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 accessed through a browser, the effect will be as follows:

Due to the size limit for uploading images, the gif screenshot is compressed, which may cause the image to be unable to be rotated. But under normal circumstances, it rotates according to the specified time speed. We should pay attention to the animation attribute here. This attribute is the abbreviation attribute of all animation attributes. We added transform and animation style attributes to the img image, so that the image can achieve a 360-degree rotation animation effect.

The method to achieve the effect of automatic rotation of css animated pictures is as mentioned above. As long as you master the transform and animation properties in CSS, you can achieve most animation effects. Their principles are basically the same.

So the above is the specific method on how to use css3 to achieve the animation effect of automatically rotating the picture 360 ​​degrees. It has certain reference value and I hope it will be helpful to friends in need!

The above is the detailed content of How to make images rotate continuously in css3? 【Detailed explanation】. For more information, please follow other related articles on the PHP Chinese website!