- 基础教程
- 高级教程
- 布局教程
- 基础教程
- Flexbox布局
《CSS入门教程》 
CSS3 - 2D转换属性
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>
它将产生以下输出-
链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-2d-transform.html
来源：LearnFk无涯教程网
旋转-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>
它将产生以下输出-
链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-2d-transform.html
来源：LearnFk无涯教程网
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>
它将产生以下输出-
链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-2d-transform.html
来源：LearnFk无涯教程网
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>
它将产生以下输出-
链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-2d-transform.html
来源：LearnFk无涯教程网
矩阵变换示例
<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>
它将产生以下输出-
链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-2d-transform.html
来源：LearnFk无涯教程网
矩阵以另一个方向变换。
<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>
它将产生以下输出-
链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-2d-transform.html
来源：LearnFk无涯教程网
祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)