2D变换用于将元素结构重新更改为平移,旋转,缩放和倾斜.
下表包含在2D变换和减号中使用的常用值;
Sr.No. | 价值&说明 |
---|---|
1 | matrix(n,n,n,n,n,n) 用于定义具有六个值的矩阵变换 |
2 | translate(x,y) 用于转换元素以及x轴和y轴 |
3 | translateX(n) 用于转换元素和x轴 |
4 | translateY(n) 用于转换元素和y轴 |
5 | scale(x,y) 用于更改元素的宽度和高度 |
6 | scaleX(n) 用于改变宽度元素 |
7 | scaleY(n) 用于更改元素的高度 |
8 | rotate(angle) 用于根据角度旋转元素 |
9 | skewX(angle) 用于定义偏斜变换以及x轴 |
10 | skewY(angle) 用于定义倾斜变换以及y轴 |
以下示例显示了所有上述属性的示例.
箱子旋转角度为20度,如下图所示 :
<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>
箱体旋转角度为-20度,如下图所示:
<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>
具有偏斜x轴的盒旋转,如下所示:
<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>
具有偏斜y轴的盒子旋转,如下所示:
<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>
矩阵变换的框旋转如下所示 :
<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>
矩阵转换为另一个方向.
<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>