How to rotate a text 360 degrees on hover using HTML and CSS?

Last Updated : 28 Jul, 2020

The Text can be rotated 360 degrees using basic HTML and CSS, this animation can be used as a heading or subheadings in the website to make it look more attractive. The below sections will guide you on how to create the desired effect.

HTML Code: In this section we will create a basic div element which will have some text inside of it.

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
    
<head> 
    <meta charset="utf-8"> 
    <title>Rotate text 360 degrees</title> 
      
</head> 
    
<body> 
    <div> 
        <h2>GeeksforGeeks</h2> 
    </div> 
</body> 
</html>

CSS Code: In this section first we will design the text using basic CSS properties and then we will create the animation using @keyframes rule, we will use the transform property to rotate the text 360 degrees at regular intervals.

<style> 
        body { 
            margin: 0; 
            padding: 0; 
            font-family: serif; 
            justify-content: center; 
            align-items: center; 
            display: flex; 
            background-color: #65E73C; 
        } 
    
        div { 
            content: ''; 
            font-size: 2em; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
        } 
    
        h2:hover{
            animation: rotate 1s linear;
        }
         
        // Rotate using @keyframes
        @keyframes rotate{
            0%{
                transform: rotate(0deg);
            }
            50%{
                transform: rotate(180deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>

Final Code: It is the combination of above two code sections.

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
    
<head> 
    <meta charset="utf-8"> 
    <title>Rotate text 360 degrees</title> 
      
</head> 
<style> 
    body { 
        margin: 0; 
        padding: 0; 
        font-family: serif; 
        justify-content: center; 
        align-items: center; 
        display: flex; 
        background-color: #65E73C; 
    } 
  
    div { 
        content: ''; 
        font-size: 2em; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
    } 
  
    h2:hover{
        animation: rotate 1s linear;
    }
  
    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style> 
    
<body> 
    <div> 
        <h2>GeeksforGeeks</h2> 
    </div> 
</body> 
</html>

Ouput:

My Personal Notes

Related Articles