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属性不是累积的。

那么如何解决这个问题？

这取决于转换类型，但方法与收集数据和获取delta值相同。

例如，在你的情况下轮换。

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

与此同时，您的top right点也会在原点附近转动。

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

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

当你更改transform-origin之后，用它们的delta值补偿跳跃。

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

和新的身高 - 旧身高等。

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

应用此方法有点复杂，可能需要matrix transforms以方便，并且在计算所有这些时需要一些试验和错误来定义+ -符号。

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

你可以看看它。

transform-origin是蓝色目标。

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

在已经转换的元素上更改transform-origin

1 个答案: