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 −
| Sr.No. | Value & Description |
|---|---|
| 1 |
matrix(n,n,n,n,n,n)
Used to defines matrix transforms with six values
|
| 2 |
translate(x,y)
Used to transforms the element along with x-axis and y-axis
|
| 3 |
translateX(n)
Used to transforms the element along with x-axis
|
| 4 |
translateY(n)
Used to transforms the element along with y-axis
|
| 5 |
scale(x,y)
Used to change the width and height of element
|
| 6 |
scaleX(n)
Used to change the width of element
|
| 7 |
scaleY(n)
Used to change the height of element
|
| 8 |
rotate(angle)
Used to rotate the element based on an angle
|
| 9 |
skewX(angle)
Used to defines skew transforms along with x axis
|
| 10 |
skewY(angle)
Used to defines skew transforms along with y axis
|
The following examples are shown the sample of all above properties.
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> learnsoftware.com. </div> <div id = "myDiv"> learnsoftware.com </div> </body> </html>
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> learnsoftware.com. </div> <div id = "myDiv"> learnsoftware.com </div> </body> </html>
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> learnsoftware.com. </div> <div id = "skewDiv"> learnsoftware.com </div> </body> </html>
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> learnsoftware.com. </div> <div id = "skewDiv"> learnsoftware.com </div> </body> </html>
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> learnsoftware.com. </div> <div id = "myDiv1"> learnsoftware.com </div> </body> </html>
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> learnsoftware.com. </div> <div id = "myDiv2"> learnsoftware.com </div> </body> </html>
No comments:
Post a Comment