transform-origin 是独立 CSS 属性，须与 transform 并列声明，不可写在 transform 函数内；常用双值语法如 right bottom，需兼容旧版 Safari/Chrome 时加 -webkit- 前缀。
直接说结论：用 transform-origin 设置，值写在 CSS 的 transform 同级规则里，不是写在 transform 函数内部；不加前缀在现代浏览器基本可用，但老版 Safari/Chrome 必须加 -webkit-transform-origin。
transform-origin 写在哪？不是 transform() 里的参数
很多人误以为 rotate(45deg) 或 scale(1.5) 能带原点参数，其实不能。原点是独立控制的 CSS 属性，必须和 transform 并列声明：
-
transform-origin是样式属性，不是函数参数 - 它作用于整个
transform值链（比如rotate(30deg) scale(0.8)都共用同一个原点） - 如果只写
transform: rotate(30deg);没配transform-origin，就按默认的50% 50% 0（即中心点）执行
常见取值怎么选？left/top/50%/0 都能混用但有坑
语法支持单值、双值、三值，但实际最常用的是双值（X Y），顺序固定：先横后纵。注意这些细节：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 关键字和数值可混用：
transform-origin: left top、transform-origin: 20px 30%、transform-origin: right 10px都合法 -
left等价于0%，center等价于50%，right等价于100%；但top/bottom只能用于 Y 轴，不能写成top left（顺序错） - 负值允许：
transform-origin: -10px -10px表示原点移出元素左上角外侧 10px - 百分比是相对于元素自身 bounding box 计算的，不是父容器
兼容性怎么处理？-webkit- 前缀现在还不能全删
虽然 Chrome/Firefox/Edge 现在都支持无前缀 transform-origin，但以下情况仍需加前缀：
- iOS Safari ≤ 15.6 和部分旧版 Android WebView 会忽略无前缀写法
- 如果你项目要支持 macOS Safari 13–14，必须加
-webkit-transform-origin - 写法要并列，不能只写一个：
transform-origin: right bottom;<br>-webkit-transform-origin: right bottom;
- 别用
WebkitTransformOrigin（JS 属性名）代替 CSS 属性——那是 DOM 接口，仅限 JS 动态设置时用
调试时容易漏掉的点：transform-origin 不触发重排，但影响视觉结果
这个属性本身不会导致 layout 触发，所以改了可能看不出变化，除非你同时用了 rotate、scale 或 skew 这类依赖原点的变换：
- 只写
transform: translate(100px, 0)时，transform-origin完全没作用 - 动画中动态改
transform-origin，要注意它本身可被 transition，但多数时候你想要的是“先定原点，再动效果”，而不是过渡原点位置 - 嵌套变换时，子元素的
transform-origin始终相对于自身盒模型，不受父级transform影响（这点和transform自身不同）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
