How to Rotate a Text 360 Degrees on hover using HTML and CSS? Last Updated : 15 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 HoverThe 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: Comment More infoAdvertise with us Next Article How to create image overlay hover slide effects using CSS ? L lakshgoel204 Follow Improve Article Tags : CSS CSS-Misc Similar Reads 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"> 2 min read How to Create an Image Overlay Fade in Text Effect on Hover using CSS ? In the context of web design, it's all about making dynamic and interesting user experiences(UI). Adding picture overlay effects to the website is a good method to improve the aesthetic appeal, especially when users interact with it by hovering over images. This article will walk you through the ste 3 min read How to rotate an element using CSS ? The purpose of this article is to rotate an HTML element by using CSS transform property. This property is used to move, rotate, scale and to perform various kinds of transformation of elements. The rotate() function can be used to rotate any HTML element or used for transformations. It takes one pa 1 min read How to Flip an Image on hover using CSS? Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect.Appr 2 min read How to create image overlay hover slide effects using CSS ? In this article, we will learn how to make image overlay hover slide effects using CSS. When the users hover over the image, a smooth sliding overlay effect occurs. This technique gives a visual appeal with interactivity, making your website more interactive.Table of ContentFull Width Slide-In Text 4 min read How to Create a Curve Text using CSS/Canvas ? Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG, 3 min read Like