Rotate Element On Hover In CSS

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.


<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Here we include Fontawesome icons -->
    <link rel="stylesheet" href="" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Here we include the style file -->
    <link rel="stylesheet" href="style.css">
    <div class="web-links">
        <a target="_blank" href="">
            <i class="fab fa-twitter"></i>
        <a target="_blank" href="">
            <i class="fab fa-facebook-f"></i>
        <a target="_blank" href="">
            <i class="fab fa-youtube"></i>
        <a target="_blank" href="">
            <i class="fa-solid fa-paper-plane"></i>
/* 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;


Try it

Latest update on 12-11-2023


Mhamad Harmush

Founder and developer of and


No comments yet.

Leave A Comment

You have to login in order to be able to post comments.

Rate Post

You haven't vote the post yet!


Online Tools