在已縮放的元素上更改變換原點

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%' 
    }); 
} 

這是一個fiddle，它顯示了我想解釋的內容。

任何幫助將不勝感激。

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; 

我已經更新您的提琴。