How to achieve rotation effect in css (code example)

CSS is a widely used web page style design language, and rotation is one of the commonly used effects. Rotation through CSS can make web pages more beautiful and intuitive. Here are some commonly used CSS rotation codes for reference.

1. Use the transform attribute

The transform attribute allows the element to rotate, scale, tilt, move, etc. The element can be rotated using the rotate() method, where deg is the angle value of rotation, a positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation.

For example:

.rotate {
transform: rotate(45deg);
}

2. Use the transition attribute and the rotate method of transform

The transition attribute can control the transition effect of the element, allowing the element to have a smooth transition effect when rotating.

For example:

.rotate {
transition: transform 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate( 45deg);
}

3. Use animation attributes and @keyframes rules

@keyframes rules can define key frames in CSS animations, and animation attributes can control the performance of CSS animations. .

For example:

.rotate {
animation: rotate-ani 2s linear infinite;
}
@keyframes rotate-ani {
from {

transform: rotate(0deg);

}
to {

transform: rotate(360deg);

}
}

The above are several commonly used CSS rotation codes, which achieve the rotation effect of elements in different ways. I hope these codes can help readers in need and make the web page more beautiful and vivid.

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