2D transforms are used to re-change the element structure as translate, rotate, scale, and skew
The following table has contained common values which are used in 2D transforms
The following examples are shown the sample of all above properties
Matrix transforms with another direction
The following table has contained common values which are used in 2D transforms
| Values | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Used to defines matrix transforms with six values |
| translate(x,y) | Used to transforms the element along with x-axis and y-axis |
| translateX(n) | Used to transforms the element along with x-axis |
| translateY(n) | Used to transforms the element along with y-axis |
| scale(x,y) | Used to change the width and height of element |
| scaleX(n) | Used to change the width of element |
| scaleY(n) | Used to change the height of element |
| rotate(angle) | Used to rotate the element based on an angle |
| skewX(angle) | Used to defines skew transforms along with x axis |
| skewY(angle) | Used to defines skew transforms along with y axis |
Rotate 20 degrees
Box rotation with 20 degrees angle as shown below<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(20deg); /* Safari */ -webkit-transform: rotate(20deg); /* Standard syntax */ transform: rotate(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv"> Tutorials point.com </div> </body> </html>It will produce the following result −
Rotate -20 degrees
Box rotation with -20 degrees angle as shown below<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Standard syntax */ transform: rotate(-20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv"> Tutorials point.com </div> </body> </html>It will produce the following result −
Skew X axis
Box rotation with skew x-axis as shown below<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewX(20deg); /* Safari */ -webkit-transform: skewX(20deg); /* Standard syntax */ transform: skewX(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="skewDiv"> Tutorials point.com </div> </body> </html>It will produce the following result −
Skew Y axis
Box rotation with skew y-axis as shown below<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewY(20deg); /* Safari */ -webkit-transform: skewY(20deg); /* Standard syntax */ transform: skewY(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="skewDiv"> Tutorials point.com </div> </body> </html>It will produce the following result −
Matrix transform
Box rotation with Matrix transforms as shown below<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv1 { /* IE 9 */ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */ transform: matrix(1, -0.3, 0, 1, 0, 0); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv1"> Tutorials point.com </div> </body> </html>It will produce the following result −
Matrix transforms with another direction
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv2 { /* IE 9 */ -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */ transform: matrix(1, 0, 0.5, 1, 150, 0); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv2"> Tutorials point.com </div> </body> </html>It will produce the following result −
No comments:
Post a Comment