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:
Last Updated :
20 May, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...