文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
CSS3中的 transform 属性不仅支持 2D 转换，还支持 3D转换，transform 3D 转换能让网页实现更加酷炫的效果，能够在三维空间中操作元素，跟 2D 转换一样，有平移、旋转、缩放、倾斜 4 种转换方式。今天瑶琴带大家来学习或复习这个知识点。
transform 属性有 2D 和 3D 两种转换，本篇介绍 transform 3D转换 的属性。
1.3D平移（Translate）
3D平移可以在三维空间中移动元素的位置。使用 translate3d 函数可以指定元素在 X、Y 和 Z 轴上的位移。示例如下：
.element {
transform: translate3d(50px, 20px, 30px);
}-
使元素在 X轴上向右平移 50 像素，Y 轴上向下平移 20 像素，Z 轴上向前平移 30 像素
2. 3D旋转（Rotate）
3D 旋转使用 rotate3d 函数在三维空间中旋转元素,可以指定绕任意轴的旋转角度。例如：
/* 绕X轴旋转30度 */
.element {
transform: rotate3d(1, 0, 0, 30deg);
}-
这将使元素绕 X 轴旋转 30 度。还可以通过更改 rotate3d 函数中的参数来绕 Y 轴或 Z 轴进行旋转。
3. 3D缩放（Scale）
3D 缩放使用 scale3d 函数在三维空间中缩放元素。可以指定在 X、Y和Z轴上的缩放比例。例如：
/* 在X、Y和Z轴上各放大1.5倍 */
.element {
transform: scale3d(1.5, 1.5, 1.5);
}-
这使元素在三个轴上等比例放大 1.5 倍。
4. 3D倾斜（Skew）
3D 倾斜使用 skew3d 函数在三维空间中倾斜元素。可以指定绕任意轴的倾斜角度。例如：
/* 绕Y轴倾斜30度 */
.element {
transform: skew3d(0, 1, 0, 30deg);
}-
元素绕 Y 轴倾斜 30 度。同样，可以通过更改函数中的参数来绕其他轴进行倾斜
以下是一个使用 3D 转换的 HTML 和 CSS 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
perspective: 800px; /* 设定透视视角 */
width: 200px;
height: 200px;
margin: 100px auto;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform-style: preserve-3d; /* 保留子元素的3D效果 */
animation: rotate 5s infinite linear; /* 添加旋转动画 */
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
这个示例中，创建了一个 3D容器（.container）和一个 3D盒子（.box）。通过使用 perspective 属性，为容器创建了一个透视视角，让容器内的 3D 变换效果更明显。盒子通过 transform-style: preserve-3d ;属性来保留其子元素的 3D 效果。
给元素盒子 .box 添加了一个旋转动画，让盒子在 Y 轴上无限旋转，可以看到 3D 效果。在浏览器中运这个示例，可以看到盒子以立体的方式旋转。
以上就是 CSS3 中关于 transform 3D 转换 的知识点，上面的示例，初学者可以粘贴到 HTML 文件中并在浏览器中运行，以查看不同的转换效果。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
