In this tutorial, you will learn how to spin any HTML element on mouse hover in pure CSS.
How To Spin An Element On Hover
First, you should add the transition property to the element to make the spinning effect happen smoothly during a specific duration.
Using the transition property we specify the duration of completing the effect (the rotation), what properties are going to change during the transition, and what speed timing function will be used.
Second, you should use the :hover pseudo-class selector on the element to make the spinning effect happend on mouse hover.
Inside this selector, we set the rotation degree that will be applied using the transform property.
This is all that we need to make the element spin on hover at the specified duration and degree.
Rotate Element On Hover Example
Suppose we have some follow-us links and there is an icon inside every link.
We will make the link do a full rotation when the user hovers over it.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Here we include Fontawesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Here we include the style file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="web-links">
<a target="_blank" href="https://twitter.com/freeskillacadem">
<i class="fab fa-twitter"></i>
</a>
<a target="_blank" href="https://www.facebook.com/freeskillacademy1">
<i class="fab fa-facebook-f"></i>
</a>
<a target="_blank" href="https://www.youtube.com/@freeskillacademycom">
<i class="fab fa-youtube"></i>
</a>
<a target="_blank" href="https://telegram.me/freeskillacademycom">
<i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</body>
</html>
/* Remove default margin and padding on all elements */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove default margin and padding on all elements */
.web-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
/* Here we make the transition effects take 0.3 second */
.web-links a {
cursor: pointer;
text-decoration: none;
margin: 0 3px 5px 3px;
display: inline-block;
transition: all .3s ease-in-out;
}
/* Here we make the element rotate 360 degree on mouse hover.
The rotation will happen during 0.3 second */
.web-links a:hover {
transform: rotate(360deg);
}
/* Here we make the icons look better */
.web-links a i {
background: #2f2f2f;
height: 38px;
line-height: 38px;
width: 38px;
border-radius: 50%;
color: #fff;
text-align: center;
font-size: 17px;
box-shadow: 0 0 1px #555 inset;
}
Result
Try it
