In this blog we will be looking into 3D transformation.
3D transformation is different from 2D as we can move our elements not only with respect to X and Y axis but also Z-axis.
The 3D transformation methods are:
⦁ translate3d(x,y,z)
⦁ scaleX(x), scaleY(y), scaleZ(z)
⦁ rotateX(angle), rotateY(angle), rotateZ(angle)
⦁ matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
1.RotateX(angle)
The rotateX() method rotates an element around its X-axis at a given degree.
The example of RotateX is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: rotateX(150deg); } </style> </head> <body> <div style="margin-left:20px;"> div element. </div> <div id="skew_div" style="margin-left:20px;"> This div element after rotating 150deg. </div> </body> </html> |
The output will be:
2.RotateY(angle)
The rotateY() method rotates an element around its Y-axis at a given degree.
The example code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: rotateY(130deg); } </style> </head> <body> <div style="margin-left:20px;"> div element. </div> <div id="skew_div" style="margin-left:20px;"> This div element after rotating Y 130deg. </div> </body> </html> |
The output will be:
3.RotateZ(angle)
The rotateZ() method rotates an element around its Z-axis at a given degree.
The code for rotatingZ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: rotateZ(130deg); } </style> </head> <body> <div> div element. </div> <div id="skew_div"> This div element after rotating Z 130deg. </div> </body> </html> |
The output will be:
Conclusion:
I hope this Blog was informative about 3D transformation. If you have any query do write to us at support@acadgild.com
Leave a Reply