The CSS3 rotate3d() Function

CSSWeb DevelopmentFront End Technology

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 −

 Live Demo

<!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 −

 Live Demo

<!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

raja
Published on 30-Dec-2019 10:16:40

Advertisements