Rotate an image using CSS3
Rotate an image using CSS3
Through many examples, we will learn how to resolve the "Rotate an image using CSS3".
You can rotate an image using CSS3. You have to create CSS3 keyframes and use this keyframe in the animation property within your class definition. After that you can use the class name in the-
Rotate an image continuously using CSS3 keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> .rotate{ width:80px; height:80px; animation: rotation infinite 3s linear; } @keyframes rotation{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } </style> </head> <body> <img src="https://w3codegenerator.com/img/logo-f2.png" class="rotate"/> </body> </html>You have to add an image in the img tag within the body tag of the HTML page and pass the rotate class to it. After that you can create the keyframes and pass the keyframe to the rotate class within your <style> tag.
To rotate the image in anti-clock, you have to pass the value 360 in place of 0 and 0 in place of 360 in transform:rotate().
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.