How to achieve image rotation effect with css

CSS image rotation effect is a commonly used special effect in web design. It can add vitality and beautiful effects to web pages and attract users' attention. The following will introduce some basic CSS image rotation effects.

1. Use the transform attribute of CSS3 to achieve the rotation effect

CSS3 provides the transform attribute, which can change the shape and position of the element through rotation, distortion, stretching and other methods. The most commonly used one is the rotation effect, which is achieved by setting the rotate value in the transform attribute of the element. The specific operations are as follows:

1. Insert pictures in HTML

<img src="图片路径" alt="图片描述" class="rotate-img">

2. Set picture styles and rotation effects in CSS

.rotate-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}

.rotate-img:hover {
    transform: rotate(360deg); /* 实现旋转效果 */
}

By hovering the mouse over the image, you can achieve the image rotation effect.

2. Use the animation property of CSS3 to achieve rotation animation effects

In addition to the transform property, CSS3 also provides the animation property, which can achieve more complex animation effects with a higher degree of freedom. This includes rotation animation effects.

1. Insert images into HTML

<img src="图片路径" alt="图片描述" class="rotate-img">

2. Set image styles and rotation animation effects in CSS

.rotate-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: rotate 5s infinite linear; /* 实现旋转动画效果 */
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

By setting keyframes The from and to values ​​can realize the rotation effect from 0 degrees to 360 degrees.

The above two implementation methods use CSS3 properties to achieve image rotation effects. They are not only simple and easy to understand, but also run well in various browsers. Use these methods to add special effects to the web page and add more vitality and beauty to the web page.

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!