How to use KeyFrames In CSS
In this example, we are using CSS keyframe animations to rotate an image on hover. The rotation is achieved by defining a keyframes animation called “rotateImage” that rotates the image along the Z-axis from 0 to 360 degrees when hovered over.
Syntax:
@keyframes rotateImage {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
Example: The below example uses KeyFrames to rotate the image on hover using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotation of an image on
hover using KeyFrames
</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.image {
height: 100px;
transition: transform 0.5s;
transform-style: preserve-3d;
perspective: 1000px;
}
.image:hover {
animation: rotateImage 1s infinite;
}
@keyframes rotateImage {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
</style>
</head>
<body>
<h5>Rotation of an image on hover using KeyFrames</h5>
<div class="container">
<img class="image" src=
"https://media.w3wiki.org/wp-content/uploads/20240305215328/gfglogo.png"
alt="w3wiki Logo">
</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