我是來提問的。我想完成一個對圖片移動、旋轉、縮放的功能。因為要打開多個圖片，并且不擋住圖片后的內容，所以沒使用canvas和svg。<div>    <img>    <img>    ……    <img></div>事件都委托到了div上，之前的功能都是靠著改變top、left、width、height四個參數達到目的，后來發現打開圖片太多的時候，資源占用太大，就改用了transform。但通過搜索，發現目前基于鼠標位置的圖片縮放都是靠改變top、left、width、height來完成的。是以左上角的點進行的縮放。算法基本上是：（鼠標e.clientX-圖片偏移量）/原寬=（鼠標e.clientX-要求得的偏移量）/變化后的寬。但是上面的方法會過多的消耗資源和對版面的重排重繪，所以選擇了css的translate和scale來完成功能。但是上面的算法卻無法套用到translate和scale上。scale是以圖片的中心點進行縮放，縮放后translate不會變，top、left、width、height也不會變。難點在于，已經縮放過的圖片，在基于鼠標位置的縮放，這個鼠標在的圖片的位置坐標和這個偏移量復雜好難計算，我算了2天都是錯誤的，所以不得不求助大家，希望大家能幫幫忙。之所以不使用transform-origin設置旋轉點，是因為我旋轉的功能是靠transform的rotate完成的。如果每次都要改變了旋轉點，那么圖片的位置也會因為rotate而改變。至于為什么不用zoom，這個好像不是標準吧，不太懂。如果zoom能更好的節省資源，我會選擇，主要是要經常對圖片縮放。