Rotating images with CSS and putting them back in place

Question

When I rotate a large image with CSS

    -moz-transform: rotate(270deg);

which sits in a floating div (using Firefox 3.6.3 to display the page), it messes up the page layout: Apparently, the size of the image is evaluated before it has been rotated.

Furthermore, the image is displaced, partly being out of the screen, because the point it is rotated about is fixed. How can I improve this? (-moz-transform-origin doesn't help here.)

Answer 1

I would set a moz-transform-origin point that makes sense (50% 50% might be a good bet for square images, or be more clever if your images vary in shape), and use a moz-transform: scale(sx[, sy]) to ensure that the final image fits in the space originally given to you by the layout algorithm.