更改已转换元素的转换原点

Question

有人提出了一些与此类似的其他问题，但没有一个得到足够的答案。

我有一个具有当前变换原点的变换元素。我想更改元素的变换原点，然后再次变换它。问题是，当我更改变换原点时，原始变换是根据新的变换原点计算的，然后发生新的变换。

我想知道是否有一种方法可以使当前变换的元素保持在其确切位置，同时更改变换原点，然后根据新的原点变换元素。

如果我的描述令人困惑，请查看这个小提琴。 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>

Answer 1

有一种方法可以避免transform-origin跳转，但它很复杂且耗时。

发生这种跳跃是因为转换是应用的东西。如果您在更改之后将一个或一系列变换甚至变换矩阵应用于您的元素，transform-origin则意味着您将从不同的原点开始再次应用当前的变换。transform财产不可累积。

那么如何解决这个问题呢？

这取决于转换类型，但收集数据和获取增量值的方法是相同的。

例如，在您的情况下，旋转。

我相信一切都是transform-origin从中心开始的。当您应用旋转时，原点围绕原点旋转。

同时，你的top right观点也围绕着原点转动。

top-right在任何旋转之前，您应该找到点的初始位置。

然后还找到最后一次旋转后的点。

当您更改transform-origin后，用这两个值的增量来补偿跳跃。

如果应用的变换是比例，则增量将是新宽度 - 旧宽度

以及新高度 - 旧高度等。

这个答案只是为了指出正确的方向。

应用这种方法有点复杂，可能需要matrix transforms一些简单的尝试和错误来定义+ -符号，同时计算所有这些。

我有一支笔，我实现了这种行为，但它是一个很长的代码。

你可以看一下。

这transform-origin是蓝色目标。

https://codepen.io/anon/pen/LLEedg?editors=0010