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"></circle>，且viewBox="0 0 200 200"，那50% 50%才真对应圆心；否则建议用绝对坐标transform-origin: 100px 100px
SVG 元素的 transform-origin 默认是 0 0，不是 50% 50%
给 <circle></circle> 直接写 transform: rotate(45deg) 却不动？不是 CSS 失效，是它正绕着左上角（0, 0）狂转。HTML 元素默认以中心为原点，SVG 图形元素默认以坐标系原点为原点，这个差异在所有现代浏览器里都一致。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 别依赖
transform-box试图改参考盒——Chrome/Firefox/Safari 都忽略它在 SVG 图形元素上的设置 - IE11 和旧 WebView 更彻底：根本不支持
transform-origin作用于<circle></circle>、<rect></rect>等图形元素 - 真正兼容的做法是放弃 CSS，改用 SVG 原生
transform属性：<circle transform="rotate(45 100 100)"></circle>，后两个参数就是旋转中心
iOS Safari 对 transform 的双写要求不能省
哪怕你写了标准 transform，iOS 12 及更早版 Safari（包括微信内置浏览器）仍可能完全不生效——它硬性依赖 -webkit-transform。
- 必须同时声明：
-webkit-transform: rotate(45deg); transform: rotate(45deg); -
Autoprefixer默认不处理这个双写逻辑，得手动在browserslist里加入iOS 或 <code>ios_saf 才能触发 - 用
getComputedStyle(el).transform检查时，iOS 可能返回空字符串，不代表没生效，只是取值方式不同
动画中动态改 transform-origin 极易掉帧
想让元素绕鼠标位置旋转？千万别在 requestAnimationFrame 里反复设 element.style.transformOrigin = x + 'px ' + y + 'px'——这会强制同步布局计算，卡顿立现。
- 正确做法是抽象一个不可见的
<g></g>容器，用translate移动它，子元素静止旋转 - 或者用复合变换模拟：
transform: translate(x, y) rotate(θ) translate(-x, -y)，注意顺序不能反 - 还要检查父容器是否设置了
overflow: hidden或clip-path，否则旋转后超出的部分会被意外裁剪
viewBox 里是逻辑单位，在 transform-origin 里可能是像素，稍不留意就偏移。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
