Safari ≤13.1 中 transform-origin: center 失效，须写为 50% 50% 或具体像素值；SVG 图形元素默认原点为 0 0，需显式指定旋转中心，且 iOS Safari 需同时声明 -webkit-transform 和 transform。

transform-origin: center 在 Safari ≤13.1 会失效

写 transform-origin: center 看似省事，但在 Safari ≤13.1 和部分 Android WebView 中直接被忽略——它只认带单位或明确百分比的写法。这不是 bug，是规范解析差异。

• 必须写成 transform-origin: 50% 50% 或 transform-origin: 100px 100px（注意两个值都要有，缺一不可）
• 百分比基于元素自身尺寸计算，但 SVG 元素若没设 width/height，只靠 viewBox，50% 可能不指向视觉中心
• 如果目标是 <circle cx="100" cy="100">，且 viewBox="0 0 200 200"，那 50% 50% 才真对应圆心；否则建议用绝对坐标 transform-origin: 100px 100px

SVG 元素的 transform-origin 默认是 0 0，不是 50% 50%

给 <circle> 直接写 transform: rotate(45deg) 却不动？不是 CSS 失效，是它正绕着左上角（0, 0）狂转。HTML 元素默认以中心为原点，SVG 图形元素默认以坐标系原点为原点，这个差异在所有现代浏览器里都一致。

• 别依赖 transform-box 试图改参考盒——Chrome/Firefox/Safari 都忽略它在 SVG 图形元素上的设置
• IE11 和旧 WebView 更彻底：根本不支持 transform-origin 作用于 <circle>、<rect> 等图形元素
• 真正兼容的做法是放弃 CSS，改用 SVG 原生 transform 属性：<circle transform="rotate(45 100 100)">，后两个参数就是旋转中心

iOS Safari 对 transform 的双写要求不能省

哪怕你写了标准 transform，iOS 12 及更早版 Safari（包括微信内置浏览器）仍可能完全不生效——它硬性依赖 -webkit-transform。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 必须同时声明：-webkit-transform: rotate(45deg); transform: rotate(45deg);
• Autoprefixer 默认不处理这个双写逻辑，得手动在 browserslist 里加入 iOS < 13 或 ios_saf < 13 才能触发
• 用 getComputedStyle(el).transform 检查时，iOS 可能返回空字符串，不代表没生效，只是取值方式不同

动画中动态改 transform-origin 极易掉帧

想让元素绕鼠标位置旋转？千万别在 requestAnimationFrame 里反复设 element.style.transformOrigin = x + 'px ' + y + 'px'——这会强制同步布局计算，卡顿立现。

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

• 正确做法是抽象一个不可见的 <g> 容器，用 translate 移动它，子元素静止旋转
• 或者用复合变换模拟：transform: translate(x, y) rotate(θ) translate(-x, -y)，注意顺序不能反
• 还要检查父容器是否设置了 overflow: hidden 或 clip-path，否则旋转后超出的部分会被意外裁剪

实际项目里最常被忽略的，是 SVG 坐标系和 CSS 布局盒子的混用——同一个数值，在 viewBox 里是逻辑单位，在 transform-origin 里可能是像素，稍不留意就偏移。