5. CSS 2D-3D 转换

CSS 的 transform 属性为元素提供了 2D 和 3D 转换功能，可以让元素进行旋转、缩放、倾斜、移动等效果，从而实现动态和交互式的网页设计。

通过结合 transition 或 animation，还能实现平滑过渡和复杂动画。

1. 什么是 CSS 转换？

CSS 转换（Transform）允许对 HTML 元素进行几何变换，包括：

• 平移（translate）
• 旋转（rotate）
• 缩放（scale）
• 倾斜（skew）

在转换过程中，元素本身的内容不会改变，只是它们的呈现方式被改变。

transform 属性分为 2D 转换 和 3D 转换。

2. CSS 2D 转换

2D 转换是基于平面（X 和 Y 轴）的变换操作。

2.1 语法

transform: function(value);

function 是转换函数，可以是以下之一：

• translate(x, y)：平移
• rotate(angle)：旋转
• scale(x, y)：缩放
• skew(x-angle, y-angle)：倾斜
• matrix(a, b, c, d, e, f)：综合变换（平移、缩放、旋转和倾斜的组合）

2.2 2D 转换函数详解

1. 平移（translate）

translate() 用于在 X 和 Y 轴方向上移动元素。

语法：

transform: translate(x, y);

• x：沿 X 轴的位移（可以是像素值、百分比）。
• y：沿 Y 轴的位移。

示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(50px, 20px);
}

效果：将元素向右移动 50px，向下移动 20px。

2. 旋转（rotate）

rotate() 用于让元素围绕其中心点旋转。

语法：

transform: rotate(angle);

• angle：旋转角度（单位为 deg，例如 45deg 表示顺时针旋转 45°）。

示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

效果：将元素顺时针旋转 45°。

3. 缩放（scale）

scale() 用于缩放元素的大小。

语法：

transform: scale(x, y);

• x：沿 X 轴的缩放倍数。
• y：沿 Y 轴的缩放倍数。（如果只写一个值，表示 X 和 Y 轴使用相同的缩放倍数。）

示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: scale(1.5, 2);
}

效果：将元素宽度放大 1.5 倍，高度放大 2 倍。

4. 倾斜（skew）

skew() 用于让元素沿 X 或 Y 轴倾斜。

语法：

transform: skew(x-angle, y-angle);

• x-angle：沿 X 轴的倾斜角度。
• y-angle：沿 Y 轴的倾斜角度。

示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transform: skew(20deg, 10deg);
}

效果：将元素沿 X 轴倾斜 20°，沿 Y 轴倾斜 10°。

5. 矩阵（matrix）

matrix() 是一个功能强大的函数，它将多种变换组合成一个变换矩阵。

语法：

transform: matrix(a, b, c, d, e, f);

参数解释：

• a、d：缩放。
• b、c：倾斜。
• e、f：平移。

除非需要精准控制，一般很少直接使用 matrix()。

3. CSS 3D 转换

3D 转换是在三维空间中进行的变换，增加了 Z 轴的控制能力。

3.1 必须启用 3D 空间

使用 3D 转换时，需要为父元素设置以下属性让其具有 3D 环境：

transform-style: preserve-3d;

3.2 3D 转换函数

1. 平移（translate3d 或 translateX/Y/Z）

translate3d(x, y, z) 用于在 X、Y 和 Z 轴方向上移动元素。

transform: translate3d(50px, 20px, 100px);

translateZ(z) 只对 Z 轴进行平移。

transform: translateZ(50px);

2. 旋转（rotate3d 或 rotateX/Y/Z）

• rotate3d(x, y, z, angle)：沿着指定的三维轴旋转。
• rotateX(angle)：沿 X 轴旋转。
• rotateY(angle)：沿 Y 轴旋转。
• rotateZ(angle)：沿 Z 轴旋转。

示例：

transform: rotateX(45deg);

效果：元素围绕 X 轴旋转 45°。

3. 缩放（scale3d 或 scaleX/Y/Z）

• scale3d(x, y, z)：分别沿 X、Y 和 Z 轴缩放。
• scaleX(x)：沿 X 轴缩放。
• scaleY(y)：沿 Y 轴缩放。
• scaleZ(z)：沿 Z 轴缩放。

4. 透视（perspective）

用于创建透视效果，模仿人眼的真实视觉感受。

语法：

perspective: value;

• value：透视距离（大于 0 的数值）。

示例：

.box {
  perspective: 500px;
  transform: rotateY(45deg);
}

3.3 3D 示例

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateY(45deg) translateZ(100px);
  perspective: 500px;
}

效果：元素沿 Y 轴旋转 45°并在 Z 轴方向移动 100 像素。

4. 结合过渡实现动态效果

通过 CSS 的 transition 属性，可以为转换效果添加平滑过渡。

示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: rotate(45deg) scale(1.5);
}

效果：鼠标悬停在元素上时，元素旋转 45° 并放大 1.5 倍，带有平滑动画效果。

5. 结合动画实现复杂效果

通过 @keyframes 和 transform 可以实现更复杂的动画效果。

示例：旋转动画

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotateAnim 2s infinite linear;
}

@keyframes rotateAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

效果：元素持续 360° 旋转。

6. 总结

• 2D 转换：只能在 X 和 Y 平面上进行平移、旋转、缩放和倾斜操作。
• 3D 转换：增加了 Z 轴，支持更复杂的视觉效果，如透视和三维旋转。
• 动态效果：通过 transition 和 @keyframes，可以为转换操作添加平滑过渡或制作复杂的动画。
• 实用性：常用于按钮交互、图片效果、卡片翻转、页面动画等场景。

熟练使用 transform 能够显著提升网页的视觉效果和交互体验！