Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Working with CSS3 3D Transform Functions
Using with 3d transforms, we can move element to x-axis, y-axis and z-axis. The following are some of the methods of CSS3 3D Transform −
S.No. |
Value & Description |
|---|---|
1 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Used to transforms the element by using 16 values of matrix |
2 |
translate3d(x,y,z) Used to transforms the element by using x-axis,y-axis and z-axis |
3 |
translateX(x) Used to transforms the element by using x-axis |
4 |
translateY(y) Used to transforms the element by using y-axis |
5 |
translateZ(z) Used to transforms the element by using y-axis |
6 |
rotate3d(x,y,x) Used to rotate the element |
7 |
scale3d(x,yz) Used to scale the element |
Let us see some examples.
matrix3d() function
The matrix3d() function in CSS is used to define a 4x4 homogeneous 3D transformation matrix. A 4x4 matrix of 16 values can be created using the matrix3d().
The following is the syntax of the matrix3d() function −
matrix3d( a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 )
The above function includes 16 values i.e., parameters −
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3 − The values for linear transformation.
a4, b4, c4, d4 − The values of translation.
In this example, we have used the transform property with the matrix3d() method for the 3d transformation matrix −
.demo_img {
transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.demo_img {
transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="demo_img" src="https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
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().
The following is the syntax of the rotate3d() method −
rotate3d(x,y,z,angle)
Above, x, y, z is the x-axis, y-azis, and z-axis. The angle is the angle of rotation −
Positive angle − Clockwise rotation
Negative angle − Counter-clockwise rotation
In this example, we have set the x, y, z axis. We have set the clockwise rotation with a positive angle −
.rotate_img {
transform: rotate3d(1, 2, 3, 45deg);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.rotate_img {
transform: rotate3d(1, 2, 3, 45deg);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Rotated Image (rotate3d)</h2>
<img class="rotate_img" src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
scale3d() function
The scale3d() function is used to scale an element in 3D space. The element is scaled based on numbers set as parameter.
The following is the syntax of the scale() method −
scale3d(x,y,z)
Above, x, y, z is the x-axis, y-azis, and z-axis.
Let us now see another example. In this, we will scale an image using the x, y, and z values in the scale3d() method −
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src= "https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
95 Views
To Continue Learning Please Login