平移、旋转与缩放
使用 translate() 移动元素，使用 rotate() 旋转元素，并使用 scale() 调整元素大小。
平移、旋转与缩放 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
变换属性
transform 会对元素应用二维和三维视觉变换，包括移动、旋转、缩放和倾斜。变换发生在布局之后，不会影响周围元素。
translate()
将元素从当前位置移动。参数：x 和 y 方向的位移。
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
为清晰起见，分别使用各个轴的函数：
<div class="slide-in active">Slide panel</div>rotate()
将元素旋转指定角度。正值表示顺时针旋转。
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
统一缩放元素，或分别沿各个轴缩放。小于 1 的值会缩小元素，大于 1 的值会放大元素。
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() 和 scaleY()
沿单个轴独立缩放：
<div class="logo">LOGO</div>组合变换
多个变换函数会按顺序应用（从右到左）。顺序会影响最终结果。
<div class="card demo-active">Card</div>变换原点
transform-origin 设置旋转和缩放的支点。默认值为中心点（50% 50%）。
<div class="card demo-active">Card</div>单独的变换属性
现代 CSS 允许将各个变换函数设置为单独的属性：
<div class="card demo-active">Card</div>使用变换实现过渡
变换是两个由 GPU 合成的属性之一。请始终使用 transition 为其添加动画，以实现流畅且高性能的效果：
<div class="card demo-active">Card</div>translate() 与 top/left
制作动画时，请始终优先使用 transform: translate()，而不是 top/left。变换由 GPU 合成；top/left 会在每一帧触发布局重新计算。
快速检查
哪个变换函数可以让元素水平翻转（例如翻转卡片）？
回顾
transform 会在布局完成后移动、旋转和缩放元素，而不影响周围内容。请使用 translate() 移动元素，使用 rotate() 旋转元素，使用 scale() 调整元素大小。可以在同一个声明中链接多个函数。现代 CSS 支持单独的变换属性。请始终使用过渡来实现由 GPU 合成的高性能动画。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「平移、旋转与缩放」课时是免费的吗？
是的 — 「平移、旋转与缩放」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「平移、旋转与缩放」这节课中我会学到什么？
使用 translate() 移动元素，使用 rotate() 旋转元素，并使用 scale() 调整元素大小。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「平移、旋转与缩放」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。