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.
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% ); } h 2: hover{ animation: rotate 1 s linear; } // Rotate using @keyframes @keyframes rotate{ 0% { transform: rotate( 0 deg); } 50% { transform: rotate( 180 deg); } 100% { transform: rotate( 360 deg); } } </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:
Please Login to comment...