在項目中使用scale的時候遇到一個場景:需要對一個指定的元素進行縮放,但同時又要保持其的相對的位置不變,這個時候就需要使用到CSS中的scale跟translate了。
比如,我有一個300*400的元素(並且該元素不支持使用width跟height)
此時我需要對其進行放大,比如我們需要對其放大一倍,
然后又要保證其相對位置跟原來保持一致,此時就需要通過translate對其進行平移,使其回到原來的相對位置。
按照正常的計算方式,我們需要將其向右平移200,向下平移150才行,但是需要注意的是此處的translate的參數是translate(100, 75)因為在實際的平移過程中translate的值也會乘上你的scale中的參數。
所以在對scale之后的元素通過平移來實現到達某個位置時,translate中的參數為:實際平移值/scale的倍數。
作者:jochenshi
鏈接:https://www.jianshu.com/p/91d0eb0a4a13
來源:簡書