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:
xxxxxxxxxx
1
div {
2
transition: 2s;
3
}
4
5
div:hover {
6
transform: rotateX(180deg);
7
}
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.
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 thetransition
property to smoothly rotate thediv
over3
seconds, - we use
div:hover
pseudo-class withtransform
property inside that actually rotates thediv
element on the hover event usingrotateX()
function.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
div {
7
height: 100px;
8
width: 100px;
9
color: white;
10
background: green;
11
display: flex;
12
justify-content: center;
13
align-items: center;
14
transition: 3s;
15
}
16
17
div:hover {
18
transform: rotateX(180deg);
19
}
20
21
</style>
22
</head>
23
<body>
24
<div>Hover me.</div>
25
</body>
26
</html>