How to rotate images with css

How to rotate images with css: First create an HTML sample file; then introduce images through the img tag; finally, add transform and animation style attributes to the img image to achieve the image rotation effect.

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

We can add transform and animation style attributes to the img image to achieve the image rotation effect.

Example:

HTML code:

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

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

We added transform and animation style attributes to the img image to make the image achieve 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.

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element. With the rotate() method, the element is rotated clockwise by a given angle. Negative values ​​are allowed and the element will be rotated counterclockwise.

The animation property is a shorthand property for setting six animation properties:

animation-name specifies the keyframe name that needs to be bound to the selector.

animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds.

animation-timing-function specifies the speed curve of animation.

animation-delay Specifies the delay before the animation starts.

animation-iteration-count specifies the number of times the animation should play.

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

【Recommended learning: css video tutorial】

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