The rotate3d() function in CSS is used to rotate an element in 3D space. Set the amount and angle of rotation as parameter of rotate3d().
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: rotate3d(1, 1, 1, 45deg);
}
.skew_img {
transform-origin: left;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src=
"https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg"
alt="Numpy">
<img class="skew_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>Output
Example
Let us now see another example −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: rotate3d(1, 2, 0, 30deg);
color: red;
font-family: sans-serif;
font-size: 30px;
}
.skew_img {
transform-origin: left;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p class="demo">Learn Apache Spark</p>
<img class="skew_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>Output
