Anti-clockwise rotation of an Image using transform Property
In this example, the image has an anti-clockwise rotation of 180 degrees on hover using the CSS transform property, resulting in an animation effect. The transition property makes a gradual rotation with a duration of 0.5 seconds.
Syntax:
.rotateImg:hover {
transform: rotate(-180deg);
}
Example: The below example uses the transform Property to rotate the image in Anti-Clockwise Rotation on hover using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Using tranform Property</title>
<style>
h5 {
text-align: center;
}
.image-container {
text-align: center;
}
.rotateImg {
height: 100px;
transition: transform 0.5s ease;
}
.rotateImg:hover {
transform: rotate(-180deg);
}
</style>
</head>
<body>
<h5>Anti-Clockwise Rotation of an Image
using tranform Property
</h5>
<div class="image-container">
<img src=
"https://media.w3wiki.org/wp-content/uploads/20230816191453/gfglogo.png"
alt="w3wiki Logo"
class="rotateImg">
</div>
</body>
</html>
Output:
Output
How to Rotate an Image on Hover in CSS ?
In CSS, we can add a rotation effect on the image on hover. This increases the interactiveness of the application. We are going to learn how can we rotate an image on hover using CSS.
Below are the approaches to rotate an image on hover using CSS:
Table of Content
- Using transform Property(Clockwise Rotation)
- Using transform Property(AntiClockwise Rotation)
- Using KeyFrames