CSS 2D 转换

它允许您在不使用图像或脚本的情况下，对网页元素进行移动、旋转、缩放和倾斜。

CSS 2D 转换（2D Transform） 可以让元素在 二维平面（x、y） 上进行：

• 平移（translate）
• 旋转（rotate）
• 缩放（scale）
• 倾斜（skew）
• 或者将多个转换组合（matrix）

这些都通过 transform 属性实现。

语法：

transform: 函数1 函数2...;

transform 常见 2D 函数

将元素从其原始位置移动。

• translate(x, y)：沿 X 轴和 Y 轴移动。x 为正值向右，y 为正值向下。
• translateX(x)：仅沿 X 轴移动。
• translateY(y)：仅沿 Y 轴移动。

应用场景：创建滑动效果、微调位置、实现相对定位的替代方案（不脱离文档流）。

.box {
    transform: translate(50px, 100px); /* 向右 50px，向下 100px */
}
.box-x {
    transform: translateX(-20px); /* 向左 20px */
}

scale() —— 缩放

改变元素的大小。

• scale(sx, sy)：sx 控制宽度缩放，sy 控制高度缩放。如果只提供一个值，则宽高同时缩放。
• scaleX(sx)：仅缩放宽度。
• scaleY(sy)：仅缩放高度。

值：1 为原始大小，2 为两倍大，0.5 为一半大，0 则元素尺寸为 0（但 DOM 节点仍在）。负值会进行镜像翻转。

应用场景：悬停放大效果、视觉强调、创建镜像。

.box {
    transform: scale(1.5); /* 放大到 1.5 倍 */
}
.box-flip {
    transform: scaleX(-1); /* 水平镜像翻转 */
}

rotate() —— 旋转

围绕元素的变换原点（默认是中心点）旋转元素。

rotate(angle)：angle 为旋转角度，单位为 deg（度）。正值顺时针，负值逆时针。

应用场景：创建箭头方向、制作徽章倾斜效果、加载动画。

.box {
    transform: rotate(30deg); /* 顺时针旋转 30 度 */
}
.box-reverse {
    transform: rotate(-90deg); /* 逆时针旋转 90 度 */
}

skew() —— 倾斜（切变）

沿 X 和/或 Y 轴倾斜元素，使其呈现“平行四边形”或“菱形”效果。

• skew(ax, ay)：ax 沿 X 轴倾斜角度，ay 沿 Y 轴倾斜角度。
• skewX(ax)：仅沿 X 轴倾斜。
• skewY(ay)：仅沿 Y 轴倾斜。

应用场景：创建倾斜的标签、模拟透视效果、动态视觉效果。

.box {
    transform: skew(20deg, 10deg); /* X轴倾斜20度，Y轴倾斜10度 */
}
.box-x {
    transform: skewX(-15deg); /* 向左倾斜 15 度 */
}

matrix() —— 矩阵转换（进阶）

等价于组合多种变换，如：

• scale
• skew
• translate

应用场景：一般用于动画计算或复杂场景，日常用得少。

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

transform-origin（变换原点）

控制元素变换的基准点。默认是 50% 50%（元素的中心）。

语法：

transform-origin: x-axis y-axis [z-axis]; /* 2D中忽略 z-axis */

值：可以是长度（px）、百分比（%）或关键词（left, center, right, top, bottom）。