Can't scroll image to the top if zoom it using CSS

I created an image view component with buttons to rotate, zoom in and zoom out. When you click a button it adds CSS transform to the image.

For some reason, when I zoom the image, I can't scroll it to the very top or left corner. I tried to add transform-origin: top left; to the image, and it fixes zoom, however, it breaks rotation. How can I solve this issue?

You can see my code here https://codesandbox.io/s/delicate-star-eitj3s?file=/src/app/app.component.ts

EDIT: transform-origin: top left; makes the image stick to the top left corner, but I need to keep the image in the center. Is it possible to fix the scroll and keep the origin for the image transformations in the center?

from Can't scroll image to the top if zoom it using CSS