CSS transform属性通过scale、rotate、translate实现元素缩放、旋转和平移，不触发重排且不影响布局。1. scale调整大小，支持X/Y轴独立缩放及负值翻转；2. rotate围绕中心点旋转，单位支持deg、rad、turn；3. translate按像素或百分比平移，性能优于margin或position。三者可组合使用，如transform: translate(-50%, -50%) rotate(45deg) scale(1.2)，顺序影响最终效果，常配合transition实现流畅动效。
CSS中的transform属性允许我们对元素进行旋转、缩放、移动和倾斜等视觉变换，而不会影响页面布局。它作用于元素的坐标系统，直接在渲染层改变其外观。下面重点解析三个常用函数：scale、rotate 和 translate。
scale：控制元素的缩放
scale函数用于调整元素的大小，可以沿X轴、Y轴或同时进行缩放。
- scale(2) 表示在X轴和Y轴都放大2倍
- scale(1.5, 0.5) 表示X轴放大1.5倍，Y轴缩小为原来的一半
- 值大于1表示放大，小于1大于0表示缩小，负值会翻转元素
- 例如
scale(-1, 1)可实现水平镜像
常用于 hover 效果中轻微放大图片或按钮，增强交互感。
rotate：让元素旋转
rotate函数使元素围绕其中心点（或指定原点）进行旋转。
立即学习“前端免费学习笔记（深入）”；
- rotate(45deg) 表示顺时针旋转45度
- 支持单位包括 deg（度）、rad（弧度）、turn（圈数），如
rotate(0.25turn)等同于90度 - 负值表示逆时针旋转，如
rotate(-30deg) - 图标旋转、加载动画、倾斜标签等场景很常见
注意旋转是基于元素自身的 transform-origin，默认是中心点（50% 50%）。
translate：移动元素位置
translate函数将元素从当前位置向指定方向平移，不脱离文档流。
- translate(20px, 10px) 表示向右移动20px，向下移动10px
- 只传一个值时，第二个默认为0，如
translate(50px)相当于 X 轴移动50px - 支持百分比，相对于自身宽高，如
translate(50%)向右移动自身宽度的一半 - 常用于居中定位、滑入动画或避免因 margin/padding 引起的布局抖动
与使用 position 或 margin 移动不同，translate 不触发重排，性能更优。
基本上就这些。掌握 scale、rotate、translate 的基本用法，再结合 transition 可轻松实现流畅的动效。实际使用时可组合多个变换，比如 transform: translate(-50%, -50%) rotate(45deg) scale(1.2);，顺序会影响最终效果，需要注意。不复杂但容易忽略细节。
