已经提出了一些与此类似的其他问题，但没有一个有足够的答案。
我有一个具有当前变换原点的变换元素。我想改变元素的变换原点，然后再次变换它。问题是当我改变变换原点时，原始变换是根据新的变换原点计算的，然后新的变换发生。
我想知道是否有办法在更改变换原点然后根据新原点变换元素时使当前变换的元素保持在其确切位置。
如果我的描述令人困惑，请查看此 fiddle 。
http://jsfiddle.net/justinbchristensen/a6reyd3t/1/
var rotateDiv = $('#rotate-div');
var rotation = 0;
$('#rotate-btn').on('click', function() {
rotation += 90;
rotateDiv.css('transform', 'rotate(' + rotation + 'deg)');
});
$('#origin-btn').on('click', function() {
rotateDiv.css('transform-origin', 'top right');
});
<button id="rotate-btn">1) Press To Rotate</button>
<button id="origin-btn">2) Press To Change Transform Origin</button>
<div id="container">
<div id="rotate-div"></div>
</div>
最佳答案
有一种方法可以避免 transform-origin 跳转，但它既复杂又耗时。
发生跳跃是因为转换是应用的东西。
如果您在之后更改 transform-origin 时将一个或一系列变换或什至变换矩阵应用于元素，则意味着您将从不同的源头再次应用当前的变换。 transform 属性不是累积的。
那么如何解决这个问题呢？
这取决于转换类型，但方法是相同的收集数据和获取增量值。
例如，在您的情况下旋转。
因为我相信 transform-origin 从中心开始。
当您应用旋转时，原点围绕原点旋转。
同时，您的 top right 点也围绕原点转动。
您应该在任何旋转之前找到 top-right 点的初始位置。
然后也找到最后一次旋转后的点。
当您更改 transform-origin 时，紧随其后，用这两者的 delta 值补偿跳跃。
如果应用的转换是一个比例，增量将是新的宽度 - 旧的宽度
和新高度 - 旧高度等。
这个答案只是为了指出正确的方向。
应用这种方法有点复杂，为了方便可能涉及 matrix transforms 并且需要一些试验和错误来定义 + - 符号，同时计算所有这些符号。
我有一支笔，我实现了这种行为，但它是一个长代码。
你可以看看它。transform-origin 是蓝色目标。
https://codepen.io/anon/pen/LLEedg?editors=0010
关于javascript - 在已经转换的元素上更改转换原点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28589940/