How to Rotate a Text 360 Degrees on hover using HTML and CSS?
Last Updated :
17 Oct, 2024
Improve
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
<!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:
