Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 20 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads