Question

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

为了实现这一点，我试图改变变换原点。

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

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

这是fiddle，显示了我要解释的内容。

非常感谢任何帮助。

Answer 1

您已在css中设置：-webkit-transition: -webkit-transform 500ms linear; 这仅适用于transform，但不适用于transform-origin，因为这是一个单独的属性。这就是原点在第二次点击时跳跃的原因。而是写：

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

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

-webkit-transition: all 500ms linear;

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

在已缩放的元素上更改transform-origin

1 个答案: