How to set the element to always rotate in css

How to set the element to rotate in css: first create an HTML sample file; then use img to introduce the image; finally use the css style "transform:rotate(360deg)" to set the element to rotate 360 ​​degrees and pass animation-duration Just set the animation duration using the property.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

When we design web pages, we often encounter various There are issues related to picture display. For example, some pictures need to be displayed with rounded corners, click on the picture to enlarge it, etc.

Mainly introduce to you the specific method of using css3 to realize automatic cyclic 360 rotation of images

CSS can use the transform attribute to set elements to rotate, scale, move or tilt.

We can use css style transform:rotate(360deg) to set the element to rotate 360 ​​degrees.

You can use animation to set animation properties. The animation duration can be set through the animation-duration property.

css3 You can set the element's rotation angle to 360 degrees by setting the element's CSS style to transform:rotate(360deg), and then set the animation duration through the animation-duration attribute to achieve continuous rotation of the element.

Example:

HTML code:

<div class="demo">
<img  class="an img lazy"  src="/static/imghw/default1.png"  data-src="1.jpg"       style="max-width:90%"  style="max-width:90%"/ alt="How to set the element to always rotate in css" >

The animation code example of css image rotation 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: 200px;}

Rendering:

Recommended study: "css video tutorial"

The above is the detailed content of How to set the element to always rotate in css. For more information, please follow other related articles on the PHP Chinese website!