ROTATE IMAGE ON HOVER USING CSS AND JS

ROTATE IMAGE ON HOVER USING CSS AND JS

 

To rotate an image on hover using CSS and JavaScript, you can follow these steps:

HTML Structure:

First, create the HTML structure with an image element:

Program:

 

image.html:

#image {
    transition: transform 0.5s ease;
}

#image:hover {
    transform: rotate(180deg);
}

Css:

document.getElementById('image').addEventListener('mouseover', function() {
    this.style.transform = 'rotate(180deg)';
});

document.getElementById('image').addEventListener('mouseout', function() {
    this.style.transform = 'rotate(0deg)';
});

This setup allows you to achieve a basic hover effect with pure CSS or add more dynamic behavior with JavaScript. Adjust the sizes, transitions, and rotation angles as per your specific design needs.