How to set the image to rotate in css

How to set the image to rotate continuously in css: You can set it by using the animation attribute and transform attribute, such as [-webkit-transform: rotate(360deg); animation: rotation;].

The operating environment of this tutorial: Windows 10 system, CSS3 version. This method is suitable for all brands of computers.

(Learning video sharing: css video tutorial)

How to set the image to rotate continuously in css:

Related attributes :

animation animation attribute

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Attribute value:

• animation-name Specifies the name of the keyframe to be bound to the selector

• animation-duration Specifies how many seconds or milliseconds the animation takes to complete

• ##animation-timing-function Sets how the animation will complete a cycle

• animation-delay Set the delay interval before the animation starts.

• animation-iteration-count Defines the number of times the animation is played.

• animation-direction Specifies whether the animation should be played in reverse in turn.

• animation-fill-mode Specifies the style to be applied to the element when the animation is not playing (when the animation is completed, or when there is a delay before the animation starts playing).

• animation-play-state Specifies whether the animation is running or paused.​

• #initial Set the property to its default value.

• inherit Inherit attributes from the parent element.​

TheTransform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, tilt, etc. the element.

transform: none|transform-functions;

Attribute value:

• none The definition is not converted.

• matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values.

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) defines 3D transformation, Use a 4x4 matrix of 16 values.

• translate(x,y) Define 2D transformation.

• translate3d(x,y,z) Define 3D transformation.

Code implementation:

html code:

<div class="demo">
    <img  class="an img lazy"  src="/static/imghwm/default1.png"  data-src="/test/img/2.png"       style="max-width:90%"  style="max-width:90%"/ alt="How to set the image to rotate in css" >
</div>

Rotation code:

.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;}

Realization effect:

Related recommendations:

CSS tutorial

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