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 tag.

Answers 1
  • 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>
    
    0

    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().

  • Back to code snippet queries related css