CSS3 3D 转换（3D Transforms）是在 CSS 中允许元素在三维空间内进行旋转、缩放、移动和倾斜等视觉变换的属性集合。它们允许开发者创建更加复杂和生动的用户界面效果。
常用 3D 转换属性
1. transform-style 属性
transform-style 属性用于定义嵌套元素如何在 3D 空间中呈现。默认值是 flat，即所有子元素都在同一平面上。
css
transform-style: flat; /* 所有子元素都在同一平面上 */
transform-style: preserve-3d; /* 子元素在 3D 空间中保留其自己的形状 */2. 3D 转换函数
CSS3 提供了一些 3D 转换函数，与 2D 转换类似，但可以在三维空间中操作元素。
旋转（rotateX, rotateY, rotateZ）
rotateX()、rotateY() 和 rotateZ() 函数分别围绕 X 轴、Y 轴和 Z 轴旋转元素。
css
transform: rotateX(45deg); /* 绕 X 轴顺时针旋转 45 度 */
transform: rotateY(30deg); /* 绕 Y 轴顺时针旋转 30 度 */
transform: rotateZ(-20deg); /* 绕 Z 轴逆时针旋转 20 度 */缩放（scaleX, scaleY, scaleZ）
scaleX()、scaleY() 和 scaleZ() 函数分别控制元素在 X 轴、Y 轴和 Z 轴的缩放。
css
transform: scaleX(1.5); /* 在 X 轴方向上放大 1.5 倍 */
transform: scaleY(0.8); /* 在 Y 轴方向上缩小到 80% */
transform: scaleZ(2); /* 在 Z 轴方向上放大 2 倍 */平移（translateX, translateY, translateZ）
translateX()、translateY() 和 translateZ() 函数分别在 X 轴、Y 轴和 Z 轴方向上移动元素。
css
transform: translateX(50px); /* 沿 X 轴方向移动 50px */
transform: translateY(-20px); /* 沿 Y 轴方向向上移动 20px */
transform: translateZ(30px); /* 沿 Z 轴方向移动 30px */倾斜（skewX, skewY）
skewX() 和 skewY() 函数分别控制元素在 X 轴和 Y 轴的倾斜角度。
css
transform: skewX(15deg); /* 沿 X 轴方向倾斜 15 度 */
transform: skewY(-10deg); /* 沿 Y 轴方向倾斜 -10 度 */3. 透视（perspective）
perspective 属性定义了观察者与元素之间的距离，以及在 3D 空间中看到的视觉效果。
css
perspective: 1000px; /* 定义透视点在 1000px 处 */4. 透视原点（perspective-origin）
perspective-origin 属性定义了透视效果的原点位置。
css
perspective-origin: 50% 50%; /* 透视点位于元素的中心 */
perspective-origin: left top; /* 透视点位于元素的左上角 */示例
以下是一个简单的示例，展示了如何使用 CSS3 3D 转换属性创建动态效果：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D 转换示例</title>
<style>
.cube {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 20px;
transform-style: preserve-3d; /* 保留子元素在 3D 空间中的形状 */
transform: rotateX(45deg) rotateY(45deg); /* 绕 X 轴和 Y 轴同时旋转 45 度 */
transition: transform 0.5s; /* 添加过渡效果 */
}
</style>
</head>
<body>
<div class="cube"></div>
</body>
</html>在这个示例中，.cube 元素定义了一个正方体，通过 rotateX() 和 rotateY() 函数实现了绕 X 轴和 Y 轴的旋转效果。通过修改 transform 属性，可以实现不同的视觉效果，如旋转、缩放和倾斜等。