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

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

Recommended Posts: