更改已缩放元素的变换原点

Question

我正在尝试实现缩放效果，该效果考虑了用户决定在要缩放的元素上滚动的位置，即缩放。

为了实现这一点，我正在尝试更改变换原点。

这种更改似乎会导致元素在更改变换原点之前跳回其原始位置，然后从该点放大元素。

if (i === 0) {
    $(this).css({
        'transform': 'scale(2)',
        'transform-origin': '100% 100%'
    });
    i++;
} else {
    $(this).css({
        'transform': 'scale(2.5)',
        'transform-origin': '30% 70%'
    });
}

这是一把小提琴，展示了我想要解释的东西。

如有任何帮助，我们将不胜感激。

Answer 1

您已经在css中设置了：-webkit-transition: -webkit-transform 500ms linear;这只对变换有效，但对变换原点无效，因为这是一个单独的属性。这就是为什么原点在第二次单击时会跳跃。改为写入：

-webkit-transition: -webkit-transform 500 ms linear, //note the comma-separation
                    -webkit-transform-origin 500ms linear;

现在变换原点也转换了。在逗号分隔的特性列表中，可以分别为每个特性定义速度和缓和程度。如果你想要所有属性都有相同的行为，你可以简单地写：

-webkit-transition: all 500ms linear;

我已经更新了你的小提琴。