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.
Rotate around X-axis - rotateX()
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
height: 75px;
width: 75px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 2s;
}
div:hover {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<span>Hover the image with mouse cursor to rotate:</span>
<div>❤️</div>
</body>
</html>
Rotate around Y-axis - rotateY()
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
height: 75px;
width: 75px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 2s;
}
div:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<span>Hover the image with mouse cursor to rotate:</span>
<div>❤️</div>
</body>
</html>
Rotate around Z-axis - rotateZ()
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
height: 75px;
width: 75px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 2s;
}
div:hover {
transform: rotateZ(180deg); /* transform: rotate(180deg);*/
}
</style>
</head>
<body>
<span>Hover the image with mouse cursor to rotate:</span>
<div>❤️</div>
</body>
</html>
Note:
You can use
rotate()method instead ofrotateZ()- these two solutions are equal.