Поворот изображения с помощью CSS и положить их на место

Question

Когда я поворачиваю большое изображение с помощью CSS

-moz-transform: rotate(270deg); 

, который сидит в плавающем DIV (с помощью Firefox 3.6.3, чтобы отобразить страницу), это портит макет страницы. По-видимому, размер изображения оценивается до его поворота.

Кроме того, изображение смещено, частично находясь вне экрана, потому что точка, в которой он повернут, зафиксирован. Как я могу улучшить это? (-moz-transform-origin здесь не помогает.)

Answer 1

Я бы установил точку отсчета moz-transform-origin, которая имеет смысл (50% 50% может быть хорошей ставкой для квадратных изображений или быть более умным, если ваши изображения будут отличаться по форме), и используйте moz-transform: scale (sx [, sy]), чтобы гарантировать, что окончательное изображение вписывается в пространство, первоначально заданное вам алгоритмом компоновки.