如何通过translate和scale，完成基于鼠标位置的图片缩放？

Question

我是来提问的。
我想完成一个对图片移动、旋转、缩放的功能。因为要打开多个图片，并且不挡住图片后的内容，所以没使用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能更好的节省资源，我会选择，主要是要经常对图片缩放。

Answer 1

你好，请问你解决了吗？我也是这种问题，缩小时left 和top值不对，我想要缩小时，根据鼠标点所在位置进行缩放

Answer 2

你好 通过translate和scale，完成图片缩放，你有解决了吗，能给个demo学习下吗

Answer 3

感觉其实你多嵌套一层来处理rotate的transform-origin,就可以用transform-origin来设置放大中心点了啊...