EN
CSS - 3D rotation
0 points
In this article, we would like to show you 3D rotation in CSS.
Quick solution:
Note:
The solutions below are detailed in the articles from the Quick solution section above.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 75px;8
width: 75px;9
font-size: 50px;10
display: flex;11
justify-content: center;12
align-items: center;13
transition: 2s;14
}15
16
div:hover {17
transform: rotateX(180deg);18
}19
20
</style>21
</head>22
<body>23
<span>Hover the image with mouse cursor to rotate:</span>24
<div>❤️</div>25
</body>26
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 75px;8
width: 75px;9
font-size: 50px;10
display: flex;11
justify-content: center;12
align-items: center;13
transition: 2s;14
}15
16
div:hover {17
transform: rotateY(180deg);18
}19
20
</style>21
</head>22
<body>23
<span>Hover the image with mouse cursor to rotate:</span>24
<div>❤️</div>25
</body>26
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 75px;8
width: 75px;9
font-size: 50px;10
display: flex;11
justify-content: center;12
align-items: center;13
transition: 2s;14
}15
16
div:hover {17
transform: rotateZ(180deg); /* transform: rotate(180deg);*/18
}19
20
</style>21
</head>22
<body>23
<span>Hover the image with mouse cursor to rotate:</span>24
<div>❤️</div>25
</body>26
</html>Note:
You can use
rotate()method instead ofrotateZ()- these two solutions are equal.
