Skip to content
Related Articles

Related Articles

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 arrow_drop_up
Recommended Articles
Page :