Clockwise Rotation of an Image using transform Property
In this approach, the image rotates clockwise by 180 degrees on hover using the CSS transform property, providing an animation effect. The transition property ensures 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 a Clockwise Rotation on hover using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Image on hover </title>
<style>
h5 {
text-align: center;
}
.image-container {
text-align: center;
}
.rotateImg {
width: auto;
height: 100px;
transition: transform 0.5s ease;
}
.rotateImg:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<h5>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:
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