How to achieve image rotation effect with css

CSS is one of the essential technologies in front-end development. Its powerful style control function can often help us optimize and beautify the effect. Among them, the new features of CSS3 have brought many conveniences to front-end development. For example, CSS3 can be used to achieve 3D effects, animation effects, transition effects, etc.

This article will introduce to you how to use CSS3 to achieve the effect of image rotation. Here, we will use the transform attribute to implement image rotation. Below, we will implement it through the following steps:

1. Add HTML structure and style

First, we need to add an img tag to display the image and add A CSS style that specifies parameters such as the width, height, and position of the image. The code is as follows:

<img  class="rotate-img lazy" src="/static/imghwm/default1.png" data-src="http://example.com/image.jpg" alt="How to achieve image rotation effect with css" >

.rotate-img {
    width: 200px;
    height: 200px;
    position: relative;
    top: 100px;
    left: 100px;
}

2. Add CSS3 style code

Next, add the style code for the rotation effect in CSS. We use the CSS3 transform property to achieve the rotation effect. This attribute contains multiple values ​​to control the rotation, scaling, displacement and other changes of the element. The following is a style code to achieve the image rotation effect:

.rotate-img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

In the above code, we use the :hover selector to specify the effect when the mouse is hovering, and then use the rotate() function in the transform attribute to control the element of rotation angle. Among them, -webkit-, -moz-, -o- prefixes are for compatibility with different browsers.

3. Effect display

Finally, we can view the effect in the browser. When the mouse hovers over the picture, the picture will rotate 360 ​​degrees based on the center point.

The complete code is as follows:

nbsp;html>


    
    
    


    <img  class="rotate-img lazy" src="/static/imghwm/default1.png" data-src="http://example.com/image.jpg" alt="How to achieve image rotation effect with css" >

In actual development, we can control the rotation angle and direction of the element by adjusting the parameters passed in the rotate() function to achieve richer rotations Effect.

In short, the transform attribute of CSS3 can help us achieve many interesting special effects, including image rotation, 3D effects, etc. Understanding and mastering these CSS effects is one of the essential skills for front-end development.

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