When I use a negative margin-left method to align the center, and then zoom in when the mouse hovers, the center point is the upper and lower center set by transform-origin, and there is no problem:

But when I use transform:translate(-50%,-50%) for center alignment:

When the mouse hovers up, the center point of the magnification seems to go to the upper left corner. Even if I set transform-orgin, it still doesn't work.

From the console, the transform-origin attribute works. I am very confused as to why this is happening, please give me some advice