How to Rotate a Text 360 Degrees on hover using HTML and CSS?

How to Rotate a Text 360 Degrees on hover using HTML and CSS?

Last Updated : 17 Oct, 2024

Rotating text 360 degrees on hover is a visual effect that makes text spin around its center point when the user hovers their cursor over it. To rotate text 360 degrees on hover using HTML and CSS, you can apply a CSS animation to the text element.

Rotate A Text 360 Degrees On Hover

The text is centered on the page using Flexbox properties on the body, along with absolute positioning and CSS transformations.
When the user hovers over the text, a CSS animation is triggered, rotating the text.
The rotation effect is defined using @keyframes, specifying the rotation from 0 degrees to 360 degrees in a smooth transition.
The background color is set to a vibrant green, and the text is styled with a larger font size for better visibility.

Example: In this example, we will rotate a text 360 degrees on hover

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>Code World</h2> 
    </div> 
</body> 
  
</html>

Output:

How to Rotate a Text 360 Degrees on hover using HTML and CSS?

L

lakshgoel204

Improve

Article Tags :

Similar Reads

How to Shake Text on hover using HTML and CSS?

Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.HTML Code: In this section we have a basic div element which contains some text inside of it.

How to Skew Text on Hover using HTML and CSS?

Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi

How to spin text on mouse hover using HTML and CSS?

The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in <li> tag and then using CSS:hover Selector selector we will rotate eac

How to Create Ghost Text Animation on Hover using HTML and CSS?

Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS.HTML Code: In this section we have a ul tag which consists of some li tags displaying some text.html<!DOCTYPE html> <html lang="en">

Shrink Text on Hover using HTML and CSS

Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.HTML Code: In this section we have simple divÂ element which contains the text separate