3D 变换还必须使用 Transform 属性和一些函数来实现。例如：
- Matrix3d()：指定 4×4 矩阵形式的 3D 变换。
- translate3d()：指定物体的3D位移，第一个参数对应X轴，第二个参数对应Y轴，第三个参数对应Z轴，参数不可选。
- translateZ()：指定对象在 Z 轴上的平移。
- rotate3d()：指定对象的3D旋转角度。前三个参数分别表示X、Y、Z旋转方向，第四个参数表示旋转角度。这个不能省略。
- rotateX()：指定对象在X轴上的旋转角度。
- rotateY()：指定对象在Y轴上的旋转角度。
- rotateZ()：指定对象在Z轴上的旋转角度。
- scale3d()：指定对象的3D缩放，第一个参数对应X轴，第二个参数对应Y轴，第三个参数对应Z轴；参数不可选。
- scaleZ()：指定对象的Z轴缩放；
- Perspective()：指定透视距离。
1.translate3d()
translate3d() 函数用于移动 3D 空间中元素的位置，该变换通过 3D 向量坐标在各个方向（X 轴、Y 轴、Z 轴）偏移元素。该函数的语法为。 :
翻译3d（tx，ty，tz）
参数说明如下：
- tx：表示元素水平（X轴）移动的距离。
- ty：表示元素垂直（Z轴）移动的距离。
- tz：表示元素在Z轴上移动的距离。该参数不能接受百分比值。
[示例] 使用translate3d()函数设置元素在三维空间中的位置。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
}
p {
transform: translate3d(25px, 25px, 50px);
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p>変換：translate3d(25px, 25px, 50px);</p>
</div>
</body>
</html> 执行结果如下图所示。
图：translate3d()函数的演示[/caption]虽然3D变换使用三维坐标系，但它们倾向于将网页视为没有深度的二维平面，因此无法清楚地显示沿Z轴的移动。您可以使用透视图和透视图原点属性来为元素添加深度感。这意味着 z 轴上较高的元素将显得较大，反之亦然。
2.translateZ()
函数translateZ()用于沿三维坐标系的Z轴平移元素。该函数的语法是：
翻译 Z(tz);
参数tz用于设置元素在Z轴上移动的距离。
提示：translateZ(tz); 是translate3d(0, 0, tz); 的简写形式。
[示例] 使用translateZ() 属性设置元素沿Z 轴移动的距离。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;/* 兼容 Safari and Chrome */
-webkit-perspective-origin: 10% 10%;/* 兼容 Safari and Chrome */
background-color: #CCC;
}
p {
transform: translateZ(30px);
border: 1px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>translateZ(30px);</p>
</div>
</body>
</html>
执行结果如下图所示。
图：translateZ()函数的演示[/caption]3.旋转3d()
rotate3d() 函数用于设置元素沿 X、Y 或 Z 轴的旋转角度。此函数只是沿固定轴旋转元素而不使其变形。 rotate3d()函数的语法形式为：
旋转 3d (x, y, z, a)
参数说明如下：
- x：设置旋转轴的X轴坐标。
- y：设置旋转轴的Y轴坐标。
- z：设置旋转轴的Z轴坐标。
- a：设置元素的旋转角度，正角度表示顺时针旋转，负角度表示逆时针旋转。
[示例] 要旋转元素，请使用rotate3d()函数。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin: 10% 10%;
border: 3px solid black;
margin: 10px 0px 0px 10px;
}
.transform {
background-color: red;
border: none;
transform: rotate3d(0, 1, 2, 40deg);
}
</style>
</head>
<body>
<div>
<div class="transform">rotate3d(0, 1, 2, 40deg);</div>
</div>
</body>
</html>
执行结果如下图所示。
图：Rotate3d()函数演示[/caption]除了rotate3d()函数外，CSS还提供了rotateX()（沿X轴旋转元素）、rotateY()（沿Y轴旋转元素）和rotateZ()（沿Y轴旋转元素）等函数。 Z轴还提供三个功能：元素围绕其旋转的轴。 rotateX()、rotateY() 和rotateZ() 函数的语法如下：
rotateX(a) /* 相当于旋转 3D(1, 0, 0, a) */
rotateY(a) /* 相当于旋转 3D(0, 1, 0, a) */
rotateZ(a) /* 相当于旋转 3D(0, 0, 1, a) */
4.scale3d()
该函数的语法是：
缩放3d（sx，sy，sz）
参数说明如下：
- sx：表示元素沿X轴的缩放倍数。
- sy：表示元素沿Y轴的缩放系数。
- sz：表示元素沿Z轴的缩放系数。
[示例] 使用scale3d()函数缩放指定元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin: 10% 10%;
border: 3px solid black;
margin: 10px 0px 0px 10px;
}
.transform {
background-color: red;
border: none;
transform: scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);
}
</style>
</head>
<body>
<div>
<div class="transform">scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);</div>
</div>
</body>
</html> 执行结果如下图所示。
提示：如果scale3d()函数的参数值超出范围[-1, 1]，则元素将向相应方向缩放；如果参数值在范围[-1, 1]内，元素将向相应方向缩放；将完成规模化。元素将在其当前方向上收缩；如果参数值为1，则元素将不会调整大小。
除了scale3d()函数之外，CSS还包括scaleX()（沿X轴缩放元素）、scaleY()（沿Y轴缩放元素）和scaleZ()用于缩放元素（沿X轴缩放元素）。还提供了 Z 轴）。根据不同的轴缩放因子。 scaleX()、scaleY() 和scaleZ() 函数的语法如下：
scaleX(sx) /* 与scale(sx, 1)相同;和scale3d(sx, 1, 1);
scaleY(sy) /* 与scale(1, sy)相同; 和scale3d(1, sy, 1);
scaleZ(sz) /* 等价于scale3d(1, 1, sz) */
Matrix3d () 函数与您之前学习的 Matrix() 函数非常相似，不同之处在于 Matrix3d() 函数允许您使用 4 × 4 矩阵来描述三维 (3D) 变换。所有 3D 变换操作都可以使用 matrix3d() 函数一次执行，该函数的语法如下：
矩阵3d（a1，b1，c1，d1，a2，b2，c2，d2，a3，b3，c3，d3，a4，b4，c4，d4）
参数说明如下：
- a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4：用于描述各种3D变换。
- a4、b4、c4：表示单元的变形量。
[示例] 要定义3D变换，请使用matrix3d()函数。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin: 10% 10%;
border: 3px solid black;
margin: 10px 0px 0px 10px;
}
.transform {
background-color: red;
border: none;
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
</style>
</head>
<body>
<div>
<div class="transform">matrix3d()</div>
</div>
</body>
</html>
执行结果如下图所示。
图：matrix3d()函数演示[/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)
