CSS3变形transform怎么旋转缩放_rotate scale translate用法【详解】

transform旋转必须带单位，如rotate(45deg)；多函数需同写一行且顺序影响结果；scale默认以中心为原点，可由transform-origin调整；translate性能优于top/left，但不可混用；复合变换须整体重写或设为none。

transform 旋转必须带单位，deg 和 rad 别混用

直接写 rotate(45) 是无效的，CSS 不接受无单位数值。浏览器会忽略整个 transform 声明。必须明确指定角度单位：deg（度）、rad（弧度）、turn（圈数）或 grad（梯度）。

• rotate(45deg) 最常用，直观易读
• rotate(0.125turn) 等价于 45 度，适合做对称动画（如 1turn 表示完整一圈）
• rotate(0.785rad) 数学计算场景可能用到，但手写易出错，不推荐日常使用
• 多个旋转叠加时，顺序影响结果：rotateX(30deg) rotateY(45deg) ≠ rotateY(45deg) rotateX(30deg)

scale 缩放默认以元素中心为原点，但可配合 transform-origin 调整

scale(0.5) 会让元素宽高都缩为原来一半，视觉上“变小”，但它的定位基准点仍是默认的 50% 50%（即中心）。如果想让左上角不动、只向右下缩放，就得改原点：

div {
  transform: scale(0.5);
  transform-origin: top left;
}

• transform-origin 支持像素值（0 0）、百分比（0% 0%）、关键词（top left），三者等效
• 该属性不影响 transform 计算逻辑，只改变所有变形（rotate/scale/translate/skew）的参考点
• 若同时设置 transform-origin 和 translate，注意 translate 是在缩放后发生的——也就是说，先缩放再平移，不是先平移再缩放

translate 平移不触发重排，但别和 top/left 混用

translateX(20px) 或 translate(20px, 10px) 是 GPU 加速的，不会引起 layout，性能优于 top + left。但两者混用会导致行为不可控：

Cliclic AI

Cliclic商品背景图编辑器是一款功能强大的AI工具，帮助用户快速生成具有吸引力的商品图背景。

下载

• 给同一个元素同时设 top: 10px 和 transform: translateY(20px)，最终位移是 30px，但浏览器内部会降级为软件渲染（失去硬件加速）
• 动画中若用 JS 动态修改 top，再用 CSS transition 控制 transform，动画会跳变或卡顿
• 响应式布局里慎用 translate 做“微调位置”：它不参与文档流，也不影响其他元素的布局计算，容易导致点击区域偏移或媒体查询失效

多个 transform 函数要写在同一行，顺序决定最终效果

CSS 中 transform 是单值属性，不能像 background 那样写多条规则覆盖。所有变形必须合并成一个函数调用：

立即学习“前端免费学习笔记（深入）”；

div {
  transform: rotate(30deg) scale(1.2) translateX(10px);
}

• 执行顺序从左到右：先旋转 → 再缩放 → 最后平移。这个顺序直接影响坐标系变化
• 比如 translateX(100px) rotate(90deg) 和 rotate(90deg) translateX(100px) 效果完全不同：前者向右移再顺时针转90°；后者先转90°（此时 X 轴变成向下），再“沿新 X 轴”向下移 100px
• 想复位某个变换？不能单独删掉某一项，得重写整个 transform 值，或用 none 清空