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%); } 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:
.png)