【transform】--------------處理圖像縮放後原點計算-------------【劉】
阿新 • • 發佈:2019-04-04
cal nbsp div 圖像縮放 image span 圖像 圖形變換 圖形
transform-origin: 100px 1000px; transform: scale(1) translate(0px,0px) rotate(0deg);
一、縮放之前圖形大小,寬300,高300
二、以原點transform-origin(100,100)進行縮放scale(1.5)
transform-origin: 100px 100px; transform: scale(1.5) translate(0px,0px) rotate(0deg);
三、這時改變原點為transform-origin(30,30)則圖形變換位置如下
四、則要回到上次原點變化之前的位置,保證已新的原點進行縮放
var animation = { sPosX:"0", sPosY:"0" } var scale = 1.5; //再次點擊的新的原點 var origin = { x:"30", y:"30" } //上一次的原點 var sOrigin = { x:"100", y:"100" } animation.sPosX += (scale - 1) / scale * (origin.x - sOrigin.x) animation.sPosY += (scale - 1) / scale * (origin.y - sOrigin.y)
【transform】--------------處理圖像縮放後原點計算-------------【劉】