Jquery 更改已缩放图元上的变换原点

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

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

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

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

下面是一个例子，说明了我要解释的内容

---

任何帮助都将不胜感激。

您已在css中设置：

-webkit转换：-webkit转换500ms线性
这仅对transform有效，但对transform origin无效，因为这是一个单独的属性。这就是为什么原点在第二次单击时跳跃。改为写：

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

现在，变换原点也被转换。
在以逗号分隔的特性列表中，可以分别为每个特性定义速度和缓和。
如果希望所有属性具有相同的行为，只需编写：

-webkit-transition: all 500ms linear;

我已经更新了你的小提琴