Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 20 May, 2021

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.

HTML




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

css




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

HTML




<!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>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!