2D变换用于在平移，旋转，缩放和倾斜时重新更改元素结构。
下表包含了用于2D转换的常用值-
| Sr.No. | Value & Remark |
|---|---|
| 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(angular) 用于基于角度旋转元素 |
| 9 | skewX(angular) 用于定义偏斜变换和x轴 |
| 10 | skewY(angular) 用于定义与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. </div> <div id="myDiv"> Tutorials point </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. </div> <div id="myDiv"> Tutorials point </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. </div> <div id="skewDiv"> Tutorials point </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. </div> <div id="skewDiv"> Tutorials point </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. </div> <div id="myDiv1"> Tutorials point </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. </div> <div id="myDiv2"> Tutorials point </div> </body> </html>
它将产生以下输出-
CSS3 - 2D转换属性 - 无涯教程网无涯教程网提供2D变换用于在平移，旋转，缩放和倾斜时重新更改元素结构。下表包含了用于2D转换的常用...
https://www.learnfk.com/css/css3-2d-transform.html
