Primer CSS Rotation Animation

Last Updated : 20 Apr, 2022

Primer CSS animations are generally used to get the user’s attention towards the animating element and for a better user experience.

In this article, we will be seeing Primer CSS Rotation Animation. To apply the rotation animation to an element, we have to add the anim-rotate class to the element. An element with rotation animation will rotate infinitely around its transform-origin coordinates, which is the center of the element in most cases.

Primer CSS Rotation Animation Classes:

anim-rotate: This class is used to apply rotation animation to an element.

Syntax:

<element class="anim-rotate"> 
    Content... 
</element>

Example 1: This example shows the use of the anim-rotate class to rotate a simple Primer CSS button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Rotation Animation - Primer CSS</title> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2>GeeksforGeeks</h2> 
        <h4>Primer CSS - Rotation Animation</h4> 
    </div> 
    <div class="d-flex flex-justify-center mt-10"> 
        <button type="button" class= 
            "anim-rotate btn-mktg btn-signup-mktg"> 
            Rotating Button 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example shows the rotation of an image by adding the anim-rotate class to it.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Rotation Animation - Primer CSS</title> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color:green;"> 
            GeeksforGeeks 
        </h2> 
        <h4>Primer CSS - Image Rotation Animation</h4> 
    </div> 
    <div class="d-flex flex-justify-center mt-6"> 
        <img class="anim-rotate" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" /> 
    </div> 
</body> 
  
</html>