css to implement image rotation animation

In web design, pictures are one of the indispensable elements. In order to make the web page more interesting and attractive, we can use CSS3 animation technology to add rotation animation effects to images. Next, this article will introduce how to use CSS to implement image rotation animation.

1. Steps

To achieve image rotation animation, we need to follow the following steps:

1. Add image tags in HTML:

First, add an image tag to the HTML. For example:

2. Set the image style in CSS:

Secondly, set the style of the image in CSS. For example:

img{
width: 200px; //Set the width of the image to 200px
height: 200px; //Set the height of the image to 200px
border-radius: 50%; //Set the picture to be circular
transition: all 0.5s; //Set the animation duration of the picture to 0.5 seconds
}

3. Add rotation animation effect:

Finally, add the code for the rotation animation effect in CSS. For example:

img:hover{

transform: rotate(360deg);   //设置图片旋转360度

}

2. Code analysis

In the above code, we use the transform attribute of CSS3 to implement the image Rotate. The transform attribute can achieve a variety of transformation effects, including rotation, scaling, translation, etc. Here, we use transform: rotate(360deg) to achieve the rotation animation effect of the image. Among them, rotate(360deg) means that the picture should be rotated 360 degrees.

In addition, we also use the transition attribute to control the duration of the animation. The transition attribute is a way to implement CSS transition effects, which can control the style of an element to smoothly transition from one state to another. Here, we set transition: all 0.5s, which means that all attribute changes will take 0.5 seconds for smooth transition.

Finally, we used transform: rotate(360deg) in the img:hover selector to achieve the image rotation effect when the mouse is hovering.

3. Complete code

The following is the complete CSS code, including the image style and rotation animation effect:

img{
width: 200px;
height: 200px;
border-radius: 50%;
transition: all 0.5s;
}

img:hover{

transform: rotate(360deg);   

}

4. Summary

In this article, we introduced how to use CSS to achieve image rotation animation effects. By using the transform attribute and transition attribute of CSS3, we can easily achieve the rotation effect of the image. Trust this simple trick to make your web page more attractive and interesting.

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