正在加载...

CSS 变换

过渡（transition）决定变化持续多久。Transform 决定像素往哪走：侧移 chip、旋转加载图标、悬停放大 badge —— 通常不会像 margin 或 top 那样挤动邻居。

transform 改变什么

transform 对绘制出来的盒子施加 2D（以后还有 3D）映射。文档流中的占位往往不变。translate() 适合微动：悬停、开合、小修正。

一个属性，多种函数 —— 单个 transform 值里不能用逗号列多个 transform；用空格链式写：transform: translateX(1rem) rotate(8deg) scale(1.05);

常用 2D 函数

📊 2D transform 函数速览

函数	常见用途
`translate(x, y)` / `translateX` / `translateY`	视觉平移，少触发布局重排
`rotate(角度)`	旋转图标、箭头（`deg`、`turn`）
`scale(x, y)` / `scale(n)`	悬停强调 —— 数值宜 modest
`skew(x, y)`	少见倾斜 —— 小角度

角度用 deg 或 turn。translate() 的百分比相对元素自身尺寸。

优先 translate

只需视觉轻推时，先用 translate，别先用 top/margin。配合上一课的 transition，动效往往更顺。

Chip nudge on hover

css

.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}

chip 视觉上移；行盒不动。用负 margin-top 试同样效果 —— 邻居会跳。

rotate 与 scale 组合

徽章、图标常把小幅 scale 和 rotate 一起用。角度宜小，界面才专业。

Badge pop and chevron spin

css

.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}

.badge:hover {
transform: scale(1.06);
}

.chevron {
display: inline-block;
transition: transform 0.2s ease;
}

.menu-open .chevron {
transform: rotate(180deg);
}

scale(1.06) 是强调；scale(2) 常是失误。rotate(180deg) 表示「已展开」—— 用 class 切换。

transform-origin — 旋转支点

默认支点在中心。transform-origin 可改 —— 左下像门轴，50% 100% 像从底边弯折的标签。

Hinge from bottom edge with transition

css

.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}

.panel-tilt.is-open {
transform: rotateX(12deg);
}

轻微 rotateX 只为熟悉语法。完整 3D 在可选课 3D Transforms —— 这里重点是 origin。

配合 transition；少动布局属性

在基础规则写 transition，动画化 transform（和 opacity）。遵守 prefers-reduced-motion: reduce。

自己动手

用 translateY(-0.2rem) 抬按钮 —— 再试 margin-top 对比。
.is-open 时 chevron 180deg。
transform-origin: left center + 小 rotate。
一个 transform 里写 translateX(0.5rem) scale(1.04)。
模拟 reduced motion。

常见错误

悬停上移用 top/margin 而非 translate
大容器上 rotate(45deg)
忘记 transform-origin
无无障碍计划的 scale(0)
2D 够用却上 heavy 3D

小结

transform 动绘制盒；流式占位通常不变
多个函数链在一个 transform 里
transform-origin = 支点
与 transition 搭配
下一课：CSS 动画（@keyframes）

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言