EN
CSS - rotate element horizontally on hover
0
points
In this article, we would like to show you how to rotate element horizontally (around X-axis) on hover event using CSS.
Quick solution:
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
In this example, we rotate the div element around X-axis with the following steps:
- in
divstyle, we specify the div style at the beginning and use thetransitionproperty to smoothly rotate thedivover3seconds, - we use
div:hoverpseudo-class withtransformproperty inside that actually rotates thedivelement on the hover event usingrotateX()function.
// ONLINE-RUNNER:browser;
<!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>