CSS transform 转换详解：translate、rotate、scale、skew 与 3D 变换一次讲清

transform 是 CSS3 里最像"魔法"的属性之一：它能在不改变文档流、不影响其他元素布局的前提下，让元素平移、旋转、缩放、倾斜。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/transform

一、transform 是什么

css 复制代码

transform: translate() rotate() scale() skew();

值不是 none 时，元素会创建层叠上下文
变换函数从左到右书写，但数学上是从右到左依次作用到坐标空间上
非替换行内元素、表格列等少数情况不支持 transform
变换只改"视觉样子"，不改"占位空间"

css 复制代码

.box:hover {
  transform: translateX(10px) rotate(15deg);
}

先按列表顺序处理：先平移、再旋转；但因为旋转会带歪坐标系，所以"先旋转再平移 "和"先平移再旋转 "结果不同。

二、位移 translate：让元素"走位"

css 复制代码

transform: translate(x, y);

写法	含义
`translate(50px)`	水平右移 50px
`translate(-50px)`	水平左移 50px
`translate(50px, 30px)`	右移 50、下移 30
`translateX(50px)`	只水平移动
`translateY(-20px)`	只垂直上移
`translate3d(x,y,z)`	2D + Z 轴深度移动
`translateZ(30px)`	朝用户方向"凸出来"

⚠️ 百分比是相对元素自身尺寸：

水平：自身宽度
垂直：自身高度

经典居中：

css 复制代码

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

三、旋转 rotate：让元素"转起来"

css 复制代码

transform: rotate(30deg);   /* 顺时针 */
transform: rotate(-30deg);  /* 逆时针 */

单位：deg（度）、rad（弧度）、turn（圈）
2D 旋转只有一个角度
默认旋转中心：元素正中心
改中心点用 transform-origin

css 复制代码

transform-origin: left top;     /* 左上角 */
transform-origin: right bottom; /* 右下角 */
transform-origin: 50% 50%;      /* 默认中心 */

3D 旋转（了解但常用在卡片翻转）

css 复制代码

transform: rotateX(180deg); /* 绕水平轴翻 */
transform: rotateY(180deg); /* 绕垂直轴翻 */
transform: rotateZ(45deg);  /* 和 rotate(45deg) 一样 */

要看到 3D 效果，父级通常要加：

css 复制代码

perspective: 1000px;

子元素要保留 3D 空间：

css 复制代码

transform-style: preserve-3d;

四、缩放 scale：让元素"变大变小"

css 复制代码

transform: scale(x, y);

无单位，是"倍数"
1：原大小
>1：放大
0~1：缩小
只写一个值：scale(1.2) → 水平垂直等比例放大

css 复制代码

transform: scale(1.5);     /* 等比例放大 */
transform: scale(0.5);     /* 等比例缩小 */
transform: scale(0.8, 1.2); /* 宽缩、高拉 */
transform: scaleX(1.2);    /* 只拉宽 */
transform: scaleY(0.8);    /* 只压扁 */

缩放中心默认也是元素中心，可配合 transform-origin 改。

五、倾斜 skew：让元素"歪过去"

css 复制代码

transform: skew(x, y);

单位是 deg
skew(30deg) → 只水平倾斜
skew(0deg, 30deg) → 只垂直倾斜
文字也会跟着歪，可读性会下降，少用

css 复制代码

transform: skewX(20deg);
transform: skewY(10deg);
transform: skew(30deg, 60deg); /* 接近看不见，别这么写 */

实战里 skew 常见于：斜切按钮、装饰背景、海报标题，不建议用在正文。

六、多个变换一起写，顺序很重要

css 复制代码

/* A：先平移，再旋转 */
transform: translate(50px) rotate(45deg);

/* B：先旋转，再平移 */
transform: rotate(45deg) translate(50px);

A 和 B 不是同一个效果：

A：元素先走到目标点，再原地转
B：元素先转 45°，再沿着"转过的 X 轴"走 50px

经验法则：

想让"位移直观" → translate 放前面

想让"绕自身转完再走位" → rotate 放前面

七、transform 的 3 个关键认知

1. 不改布局

css 复制代码

.card:hover {
  transform: scale(1.05);
}

卡片"看起来大了"，但原来占的地方没变，旁边元素不会被挤开。

2. 和 transition 是黄金搭档

css 复制代码

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-6px) scale(1.03);
}

⚠️ transition 要写在默认状态，不要只写在 :hover 里，否则移出会"瞬移回去"。

3. 会创建层叠上下文

transform 不是 none 时：

元素变成层叠上下文
position: fixed / absolute 的子元素会以它为包含块
z-index 比较规则会变化

八、无障碍：动效别把人转晕

旋转、缩放、无限循环动画可能诱发偏头痛/晕动症。

正规做法是尊重系统设置：

css 复制代码

@media (prefers-reduced-motion: reduce) {
  .box {
    transition: none;
    animation: none;
  }
}

原则不是"全关掉"，而是：

去掉大幅位移、旋转、视差
保留颜色、透明度等轻量反馈

九、一张表记住四个函数

函数	作用	单位	常用场景
`translate`	位移	`px / %`	hover 上移、弹窗、居中
`rotate`	旋转	`deg`	loading、卡片翻转、图标
`scale`	缩放	倍数	按钮反馈、图片放大
`skew`	倾斜	deg	装饰、海报、斜切 UI

十、最小实战模板

css 复制代码

.card {
  width: 240px;
  height: 160px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-8px) rotate(1deg) scale(1.03);
}

这一行就包含了：

上浮（translateY）
微旋（rotate）
放大（scale）
平滑过渡（transition）

读者互动：

如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
如果觉得文章有帮助，欢迎点赞鼓励。
想与我共同进步，欢迎关注我。