2D 变换可以使用 CSS 变换属性和以下变换函数来实现：
- Matrix()：以包含六个值（a、b、c、d、e、f）的变换矩阵的形式指定2D变换。这是一个 [a, b, c, d, e, f ] 变换矩阵。
- translate()：沿X轴和Y轴平移该函数必须提供1-2个参数，第一个参数对应于X轴，第二个参数对应于Y轴。默认值为 0。
- translatex()：沿 X 轴（水平）平移对象。
- translatey()：沿 Y 轴（垂直）平移对象。
- rotate()：旋转指定的对象。旋转角度可以指定为函数参数。
- scale()：缩放对象。该函数必须提供1-2个参数，第一个参数对应于X轴，第二个参数对应于Y轴。如果不提供，则采用第一个参数。默认值；
- scalex()：缩放对象（改变元素的宽度）；
- scaley()：缩放对象（改变元素的高度）；
- skew()：沿X轴和Y轴倾斜该函数必须提供1-2个参数，第一个参数对应于X轴，第二个参数对应于Y轴。未指定，默认值为0。
- skewx()：沿 X 轴（水平）扭曲对象。
- skewy()：沿 Y 轴（垂直）倾斜对象。
1. 翻译()
translate() 函数用于根据指定的参数水平（X 轴）或垂直（Y 轴）平移元素。该函数的语法是：
翻译（tx，ty）
其中，tx对应元素在水平（X轴）方向移动的距离，ty对应元素在垂直（Y轴）方向移动的距离，参数ty可以忽略（默认为0） ) 两个参数都可以为负。
[示例] 使用translate()函数移动指定元素：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
transform: translate(100px, 10px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
执行结果如下图所示。
图：translate()函数的演示[/caption]如果只想水平或垂直移动元素，还可以使用translateX()（水平移动元素）或translateY()（垂直移动元素）。指定一个参数。例如：
平移X(100px); /* 与平移(100px, 0px)相同 */
翻译Y(10px); /* 与翻译(0px, 10px) 相同 */
2.旋转()
rotate()函数用于按照指定的角度旋转元素，该函数的语法如下：
旋转（一）
参数a表示元素旋转的角度。 a 正值表示顺时针旋转；a 负值表示逆时针旋转。
[示例] 使用rotate()函数旋转元素：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 20px;
transform: rotate(45deg); /* 45度回転させる */
}
</style>
</head>
<body>
<div></div>
</body>
</html> 执行结果如下图所示。
图：Rotate() 函数演示[/caption]3.缩放()
scale()函数用于缩放（放大或缩小）指定元素，函数语法如下：
规模（SX，SY）
其中，sx表示水平方向的倍率，sy表示垂直方向的倍率。另外，参数sy可以省略，其默认值等于sx。
【示例】使用scale()函数缩放指定元素。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #CCC;
transform: scale(0.7);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 执行结果如下图所示。
图：scale()函数演示[/caption]提示：如果scale()指定的参数值在-1~1范围之外，则元素被放大；如果参数值在-1~1之间，则元素被缩小。
与translate()函数类似，如果您只想水平或仅垂直缩放元素的大小，也可以使用scaleX()（水平缩放元素）和scaleY()。 （垂直缩放元素）功能。 scaleX() 和scaleY() 函数只能提供一个参数。例如：
scaleX(0.5); /* 与scale(0.5, 1)相同 */
缩放Y(0.5); /* 与缩放(1, 0.5) 相同 */
4.倾斜()
Skew()函数用于沿水平（X轴）和垂直（Y轴）方向倾斜和歪斜元素。该函数的语法是：
偏斜(ax, ay)
其中，参数ax表示元件在水平方向的扭曲角度，参数y表示元件在垂直方向的扭曲角度。另外，参数y可以省略。如果省略参数 ay，则默认值为 0。
[示例] 使用 skew() 函数扭曲指定元素：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 10px;
transform: skew(-15deg, 20deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 执行结果如下图所示。
图：skew()函数的演示[/caption]或者，如果您只想水平或仅垂直倾斜元素，也可以使用 skewX() （水平缩放元素）和 skewY() （垂直缩放元素）函数。 SkewX() 和 skewY() 函数只能提供一个参数。例如：
skewX(15deg); /* 与 skew(15deg, 0deg) 相同 */
SkewY(15deg); /* 与 skew(0deg, 15deg) 相同 */
Matrix ()函数可以被认为是skew()、scale()、rotate()和translate()等几个函数的简写。matrix()函数允许您执行所有2D平移操作的语法。函数如下：
矩阵（a、b、c、d、tx、ty）
Matrix()函数的六个参数分别对应函数scaleX()、skewY()、skewX()、scaleY()、translateX()和translateY()，可以使用matrix()对2D图像进行处理意识到了。行动例如：
-
translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);tx和ty是水平和垂直平移值。 -
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);a是一个以度为单位的值。您可以通过交换sin(a)和-sin(a)的值来反转旋转。 -
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);其中 sx 和 sy 是水平和垂直缩放值。 -
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);ax 和 ay 是以度为单位的水平和垂直值。
【示例】使用matrix()函数对元素进行2D变换操作。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 20px 0px 0px 10px;
float: left;
}
.one {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
.two {
margin-left: 35px;
transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0);
}
.three {
margin-left: 40px;
margin-top: 25px;
transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
}
.four {
transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html> 执行结果如下图所示。
图：matrix()函数演示[/caption]
![2021 年如何设置 Raspberry Pi Web 服务器 [指南]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
