I’d like to center an image in the browser window and apply a 3D transformation to it. This all works fine until the image is larger than the browser window, in which case I lose the parts of the image that would be off the screen, even though after the transformation, the entire image would fit in the browser window. I don’t want to show scrollbars. If I make it a background image, I can transform the div, but I lose the parts of the image that would be off the screen if it was not transformed.
Is it possible to show an image larger than the browser window without getting scrollbars?
I started from scratch with a small example and managed to get it working by using
overflow: hidden;on a div that contained a div that contained the image.