Image rotate css: If you are searching for a code in CSS that can rotate any image? Then this is the right tutorial you are looking for. We have covered everything like How to Continuously Rotate an Image using CSS Animations.
Image Element has three classes namely rotate, linear, infinite. In CSS Stylesheet we need to create a declaration block for each class. These classes are called utility or helper classes.
.rotate Code Block Declaration
.rotate {
animation: rotation 2s;
}
This will not make anything. We can add an animation property to the element to rotate it:
animation: rotation 2s infinite linear;
Or we can add a class namely rotate to a particular element to target that:
.rotate {
animation: rotation 2s infinite linear;
}
We can tweak the 2s to slow down or speed up the rotation period of the element.
Then we can add the keyframes with transform property for it to make rotation:
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
Now the element should rotate. If you reload your browser you will see the image rotating a single time over 2 seconds. If you want to rotate the image continuously you need to change the animation transition timing from default ease to a consistent speed curve known as linear.
Do Check:
.Linear Code Block Declaration
.linear {
animation-timing-function: linear;
}
Reload your browser tab so that image will rotate to spin from start to end with a consistent speed rate.
.infinite Code Block Declaration
css rotate image animation: Let’s us make our image rotate infinitely by declaring our .infinite code block
.infinite {
animation-iteration-count: infinite;
}
We can declare all our animation properties in a single line and a single class as follows
.rotate-image {
animation: rotation 2s linear infinite;
}
This can save a lot of code but for learning purposes, it is better to break things into smaller pieces. You can understand how individual components work.