Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, Below example clearly specifies how the element will rotate.
Methods of 3D transforms
Below methods are used to call 3D transforms −
| Sr.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 |
scaleX(x)
Used to scale transforms the element by using x-axis
|
| 7 |
scaleY(y)
Used to scale transforms the element by using y-axis
|
| 8 |
scaleY(y)
Used to transforms the element by using z-axis
|
| 9 |
rotateX(angle)
Used to rotate transforms the element by using x-axis
|
| 10 |
rotateY(angle)
Used to rotate transforms the element by using y-axis
|
| 11 |
rotateZ(angle)
Used to rotate transforms the element by using z-axis
|
X-axis 3D transforms
The following an example shows the x-axis 3D transforms.
<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } </style> </head> <body> <div> learnsoftware.com </div> <p>Rotate X-axis</p> <div id = "myDiv"> learnsoftware.com. </div> </body> </html>
The following an example shows the y-axis 3D transforms −
<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } </style> </head> <body> <div> learnsoftware.com </div> <p>Rotate Y axis</p> <div id = "yDiv"> learnsoftware.com. </div> </body> </html>
The following an example shows the Z-axis 3D transforms −
<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } </style> </head> <body> <div> learnsoftware.com </div> <p>rotate Z axis</p> <div id = "zDiv"> learnsoftware.com. </div> </body> </html>
No comments:
Post a Comment