- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The CSS3 rotate3d() Function
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
Published on 30-Dec-2019 10:16:40
- Related Questions & Answers
- The CSS3 scale3d() Function
- The CSS3 matrix3d() Function
- Understanding the CSS3 Filter Functions
- Adjusting the Image Contrast using CSS3
- Setting the Image Brightness using CSS3
- CSS3 Animation @keyframes
- CSS3 Opacity property
- CSS3 Linear gradients
- CSS3 Radial Gradients
- CSS3 Diagonal Gradient
- CSS3 Resize Property
- CSS3 font combinations
- CSS3 Rounded corners
- Adjusting the Saturation of Images using CSS3
- Using the CSS3 Linear and Radial Gradients
Advertisements