5. CSS 2D-3D 转换

CSS 提供了强大的 2D 和 3D 转换（transform） 属性，用于对元素进行平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等变换，从而增强网页的动态视觉效果。

1. transform 属性

• 用于应用 2D 或 3D 转换。
• 可以对元素进行 平移、旋转、缩放、倾斜 等操作。

• 语法：

  transform: [function1] [function2] ... ;

  • 支持多个转换函数，按顺序依次执行。

• 值类型：

  • 2D 转换函数：translate()、rotate()、scale()、skew()。
  • 3D 转换函数：translate3d()、rotate3d()、scale3d() 等。

2. 2D 转换相关属性

2.1 平移（translate 系列）

用于移动元素的位置。

• translate(x, y)：

  • 平移指定的 横向（x） 和 纵向（y） 距离。
  • 单位可以是像素（px）、百分比（%）等。
  • 默认值为 0。

示例：

div {
  transform: translate(50px, 100px); /* 元素向右移动 50px，向下移动 100px */
}

• translateX(x)：

  • 仅沿横轴（x）方向平移。

示例：

div {
  transform: translateX(100px); /* 元素向右移动 100px */
}

• translateY(y)：

  • 仅沿纵轴（y）方向平移。

示例：

div {
  transform: translateY(50px); /* 元素向下移动 50px */
}

2.2 缩放（scale 系列）

用于改变元素的大小。

• scale(x, y)：

  • 缩放元素的 宽度（x） 和 高度（y）。
  • 默认值为 1（无缩放）。

示例：

div {
  transform: scale(1.5, 2); /* 宽度放大 1.5 倍，高度放大 2 倍 */
}

• scaleX(x)：

  • 仅缩放元素的宽度。

示例：

div {
  transform: scaleX(2); /* 宽度放大 2 倍 */
}

• scaleY(y)：

  • 仅缩放元素的高度。

示例：

div {
  transform: scaleY(0.5); /* 高度缩小为原来的 0.5 倍 */
}

2.3 旋转（rotate）

用于围绕元素中心点旋转。

• rotate(angle)：

  • 按照指定角度旋转元素。
  • angle 可以是正值（顺时针旋转）或负值（逆时针旋转）。
  • 单位为度数（deg）。

示例：

div {
  transform: rotate(45deg); /* 顺时针旋转 45 度 */
}

2.4 倾斜（skew 系列）

用于倾斜元素的形状。

• skew(x-angle, y-angle)：

  • 沿 x 和 y 轴方向倾斜元素。

示例：

div {
  transform: skew(30deg, 15deg); /* x 轴倾斜 30 度，y 轴倾斜 15 度 */
}

• skewX(angle)：

  • 仅沿 x 轴方向倾斜。

示例：

div {
  transform: skewX(45deg); /* x 轴方向倾斜 45 度 */
}

• skewY(angle)：

  • 仅沿 y 轴方向倾斜。

示例：

div {
  transform: skewY(20deg); /* y 轴方向倾斜 20 度 */
}

3. 3D 转换相关属性

3.1 平移（translate3d 系列）

在 3D 空间中移动元素。

• translate3d(x, y, z)：

  • 沿 x、y 和 z 轴平移元素。

示例：

div {
  transform: translate3d(50px, 100px, 20px); /* x 平移 50px，y 平移 100px，z 平移 20px */
}

• translateZ(z)：

  • 仅沿 z 轴方向（深度）平移元素。

示例：

div {
  transform: translateZ(30px); /* 元素向屏幕外移动 30px */
}

3.2 缩放（scale3d 系列）

在 3D 空间中缩放元素。

• scale3d(x, y, z)：

  • 沿 x、y 和 z 轴分别缩放元素。

示例：

div {
  transform: scale3d(1.5, 2, 0.5); /* 宽度放大 1.5 倍，高度放大 2 倍，深度缩小为 0.5 倍 */
}

• scaleZ(z)：

  • 仅缩放 z 轴方向。

示例：

div {
  transform: scaleZ(2); /* z 轴方向放大 2 倍 */
}

3.3 旋转（rotate3d 系列）

在 3D 空间中旋转元素。

• rotate3d(x, y, z, angle)：

  • 按照指定的 x、y、z 轴的方向旋转元素。
  • x, y, z 指定旋转轴的方向向量。
  • angle 指定旋转角度。

示例：

div {
  transform: rotate3d(1, 1, 0, 45deg); /* 绕 x 和 y 轴旋转 45 度 */
}

• rotateX(angle)：

  • 绕 x 轴旋转。

示例：

div {
  transform: rotateX(60deg); /* 绕 x 轴旋转 60 度 */
}

• rotateY(angle)：

  • 绕 y 轴旋转。

示例：

div {
  transform: rotateY(90deg); /* 绕 y 轴旋转 90 度 */
}

• rotateZ(angle)：

  • 绕 z 轴旋转（与 2D 的 rotate 等效）。

示例：

div {
  transform: rotateZ(45deg); /* 绕 z 轴旋转 45 度 */
}

4. 辅助 3D 转换的属性

4.1 perspective

• 定义 3D 转换的视距（视角深度）。
• 值越小，透视效果越强（近大远小）。
• 需要设置在父元素上，并对子元素生效。

示例：

div {
  perspective: 500px; /* 设置视距为 500px */
}

4.2 perspective-origin

• 定义 3D 转换的视角原点。

• 属性值：

  • x 和 y 值：默认值为 50% 50%（中心点）。

示例：

div {
  perspective-origin: 0% 50%; /* 视角从左侧中间看 */
}

4.3 transform-style

• 定义子元素是否保留 3D 转换。

• 属性值：

  • flat（默认）：子元素不保留 3D 转换。
  • preserve-3d：子元素保留 3D 转换。

示例：

div {
  transform-style: preserve-3d;
}

4.4 backface-visibility

• 控制 3D 转换时元素的背面是否可见。

• 属性值：

  • visible（默认）：背面可见。
  • hidden：背面不可见。

示例：

div {
  backface-visibility: hidden; /* 隐藏元素背面 */
}

5. 结合使用示例

3D 旋转盒子示例：

.container {
  perspective: 800px; /* 设置视距 */
}

.box {
  width: 100px;
  height: 100px;
  transform: rotateY(45deg); /* 绕 Y 轴旋转 45 度 */
  transform-style: preserve-3d; /* 保留子元素的 3D 转换 */
  backface-visibility: hidden; /* 隐藏背面内容 */
}

总结

CSS 2D 和 3D 转换提供了丰富的属性，主要包括以下内容：

通过这些属性，我们可以轻松创建平面及立体动画效果，增强网页的交互性和视觉吸引力。