To rotate an element 30 degrees on hover using CSS, you can use the transform property with the rotate function. Here's an example:
HTML:
<div class="rotate-on-hover">Hover over me to rotate!</div>
CSS:
.rotate-on-hover {
transition: transform 0.5s ease;
}
.rotate-on-hover:hover {
transform: rotate(30deg);
}
In this example, we're adding a rotate-on-hover class to our element, which we'll use to apply the styles. We're also setting a transition property with a 0.5-second duration and an ease timing function. This will make the rotation animation smoother.
When the element is hovered over, we're adding a transform property with a rotate function that rotates the element 30 degrees. This will cause the element to rotate once by 30 degrees when the mouse hovers over it.
You can adjust the duration and angle of the rotation as needed to achieve the desired effect. Additionally, you can use other transformation functions like scale, translate, and skew to create other types of animations.