javascript - 在已经转换的元素上更改转换原点

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>

Answer 1

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

跳跃的发生是因为转换是应用的东西。如果您在之后更改 transform-origin 时对您的元素应用了一个或一系列变换，甚至是变换矩阵，这意味着您正在从不同的起点重新应用当前的变换。 transform 属性不是累积的。

那么如何解决呢？

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

例如，在您的案例中轮换。

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

同时，您的右上角 点也围绕原点转动。

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

然后也求最后一次旋转后的点。

当您更改 transform-origin 时，就在它之后，用这两个的 delta 值补偿跳跃。

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

和新高度 - 旧高度等

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

应用这种方法有点复杂，可能涉及矩阵变换以方便使用，并且在计算所有这些时需要反复试验来定义+ -符号。

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

你可以看看。

transform-origin 是蓝色目标。

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