CSS3 - 2d变换(CSS3 - 2d transform)
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度
箱体旋转角度为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>
IOWIKI.com.
</div>
<div id = "myDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开旋转-20度
箱体旋转角度为-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>
IOWIKI.com.
</div>
<div id = "myDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开偏斜X轴
具有偏斜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>
IOWIKI.com.
</div>
<div id = "skewDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开歪斜Y轴
具有偏斜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>
IOWIKI.com.
</div>
<div id = "skewDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开矩阵变换
使用Matrix变换的框旋转如下所示 -
<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>
IOWIKI.com.
</div>
<div id = "myDiv1">
IOWIKI.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>
IOWIKI.com.
</div>
<div id = "myDiv2">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开