在已经变换的元素上更改变换原点

Question

有几个类似的问题已经被问到了，但它们都没有足够的答案。

我有一个带有当前变换原点的转换元素。我想改变元素的变换原点，然后再次进行变换。问题在于当我改变变换原点时，原始变换是基于新的变换原点计算的，然后才进行新的变换。

我想知道是否有一种方法可以使当前变换的元素保持在原地，同时改变变换原点，然后根据新的原点对元素进行变换。

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

- justinbc820

---

你解决了吗？我也遇到了同样的问题，正在考虑使用矩阵变换来保留变换。 - njorlsaga

@njorlsaga 不好意思，我不得不想出一个与这种方法根本不同的解决方案。 - justinbc820

你能分享一下那个解决方案吗？ - Ali Somay

Answer 1

有一种方法可以避免“transform-origin”跳动，但这很复杂且耗时。

跳动是因为变换是应用于物体的。如果你对元素应用了一个或多个变换，甚至是变换矩阵，当你改变“transform-origin”时，这意味着你要再次从不同的原点开始应用当前的变换。 “transform”属性不是累计的。

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

这取决于变换类型，但方法相同：收集数据并获取增量值。

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

我认为“transform-origin”从中心开始。当你应用旋转时，原点会绕着原点旋转。

同时，你的右上角点也会绕着原点旋转。

你应该找到在任何旋转之前你的右上角点的初始位置。

然后还要找到最后一次旋转后的位置。

当你改变“transform-origin”时，就在它之后，用这两个值的增量来补偿跳动。

如果应用的变换是缩放，则增量将是新宽度-旧宽度。

并且新的高度-旧的高度等等。

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

应用这种方法有点复杂，可能需要使用矩阵变换来简化，并且需要一些试错来定义计算过程中的加减号。

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

你可以看一下它。

transform-origin 是蓝色目标。

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

- Ali Somay