变换属性
最后更新：2026-09-13
transform 变换属性
transform 用于对元素应用 2D 或 3D 几何变换，包括平移、旋转、缩放、倾斜等操作。变换发生在渲染阶段，不会影响文档流布局，因此是实现高性能视觉效果的常用手段。transform 是 CSS 动画和交互设计的核心属性之一。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | transform |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
transform: none | <transform-function>+;
/* <transform-function> = translate() | translate3d() | rotate() | rotate3d() | scale() | skew() | matrix() | perspective() 等 */⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无变换 |
<transform-list> | 类型 | 变换函数列表：translate/rotate/scale/skew |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| 所有主流浏览器均支持 | |||||
提示： 多个变换函数写在一个 transform 中用空格分隔，执行顺序从右到左（即最右边的函数先应用），顺序不同结果可能不同。
注意： transform 会创建新的堆叠上下文（stacking context）和包含块，可能影响 position: fixed 子元素的定位基准。
❓ 常见问题
Qtransform 会影响周围元素的布局吗？
A不会。transform 属于合成阶段（compositing）的视觉变换，元素在文档流中仍占据原来的空间和尺寸，周围元素完全不受影响，因此也不会触发重排，这也是 transform 动画性能优于 left、top 等布局属性的根本原因。注意它会让元素成为 fixed 子元素的定位基准。
Q2D transform 和 3D transform 有什么区别？
A2D 变换只在 X、Y 轴平面内进行，如 translate()、rotate()、scale()、skew()；3D 变换增加 Z 轴，使用 translateZ、rotateX 等函数，通常需要父元素设置 perspective 提供透视，并配合 preserve-3d 保留子元素 3D 空间，才能看到立体效果。
Q为什么说 transform 动画性能好？会触发 GPU 加速吗？
Atransform 动画不会触发布局和重绘，浏览器会把元素提升到独立的合成层（compositor layer），由 GPU 负责合成，即使页面滚动或与其他元素交叠也能保持流畅。相比 left/top 每帧都触发重排，transform 是实现 60fps 动画的首选，配合 will-change 效果更稳定。
Qtransform 中多个函数的执行顺序是怎样的？先写 translate 和先写 rotate 有区别吗？
A多个函数从右到左依次应用，最右边的先生效。例如 transform: translate(20px) rotate(45deg) 是先旋转再平移，元素沿旋转后方向移动；而 rotate(45deg) translate(20px) 先平移再旋转，结果完全不同。
🏷️ 相关属性
💡 相关案例
📚 相关教程
