如何通过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

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