I"m here to ask a question.
I want to complete a function of moving, rotating and zooming the picture. Because you want to open multiple pictures and don"t block the content behind the picture, you don"t use canvas and svg .

<div>
    <img>
    <img>
    
    <img>
</div>

events are delegated to div. The previous functions are achieved by changing the four parameters top, left, width, and height . Later, when you find that too many images are opened, you take up too much resources, so you use transform instead.

however, through the search, it is found that the current image zooming based on mouse position is accomplished by changing top, left, width, height .
is scaled at the point in the upper left corner. The
algorithm is basically
(mouse e.clientX-image offset) / original width = (mouse e.clientX-offset to be obtained) / changed width.

but the above method consumes too much resources and rearranges the layout, so css"s translate and scale are selected to complete the function.
but the above algorithm cannot be applied to translate and scale .
scale is zoomed to the center of the picture. After zooming, translate will not change, and top, left, width, height will not change.
the difficulty is that for a picture that has been scaled, based on the zooming of the mouse position, the coordinate of the mouse in the picture and the offset are complex and difficult to calculate. I have been wrong for 2 days, so I have to ask for help. I hope you can help me.

does not use transform-origin to set the rotation point is that my rotation function is done by rotate of transform. If you change the rotation point every time, the position of the image will also change because of rotate .

as to why you don"t use zoom , this doesn"t seem to be the standard. I don"t quite understand it. If zoom can save resources better, I will choose, mainly to zoom the image frequently.