[Edit]

CSS - rotate element horizontally on hover

1 contributors

2 contributions

0 discussions

0 points

Created by:

nickkk0

647

In this article, we would like to show you how to rotate element horizontally (around X-axis) on hover event using CSS.

Quick solution:

xxxxxxxxxx
 
div {
  transition: 2s;
}
​
div:hover {
  transform: rotateX(180deg);
}

The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.

Practical example

Edit

In this example, we rotate the div element around X-axis with the following steps:

in div style, we specify the div style at the beginning and use the transition property to smoothly rotate the div over 3 seconds,
we use div:hover pseudo-class with transform property inside that actually rotates the div element on the hover event using rotateX() function.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    div {
      height: 100px;
      width: 100px;
      color: white;
      background: green;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 3s;
    }
​
    div:hover {
      transform: rotateX(180deg);
    }
​
  </style>
</head>
<body>
  <div>Hover me.</div>
</body>
</html>