如何旋转元素而不覆盖其下面的元素？

Question

I have an application where my users might want to rotate the images they are shown to better view them.

I figured I could just apply -moz-transform and friends and be done with it, but then I realized that my browser does not seem to "push" elements out of the way like I expect, resulting in this:

My question is: is there a way for me to rotate the image, while having my browser move the elements around it in respect to its new dimensions?

Here's a JSFiddle: http://jsfiddle.net/8pFUB/ . Click the image to rotate it and illustrate the problem.

Answer 1

In pure CSS, no. But you can use jQuery to set some new margins:

var e = $(el);
e.css({
    'margin-bottom': (e.width( ) * Math.abs( Math.sin( degree * Math.PI / 180.0 ) ) + e.height( ) * (Math.abs( Math.cos( degree * Math.PI / 180.0 ) ) - 1)) / 2
});

Fiddle: http://jsfiddle.net/8pFUB/21/

Also to reply to Colonel Panic's answer, here is a version which sets all 4 margins: http://jsfiddle.net/8pFUB/24/ . It's a bit less elegant in the rotation, so I'd suggest only setting the margins you actually want to change.

Full (adapted) code:

function setPaddedRotation( element, degree ) {
    var e = $(element);
    var rads = degree * Math.PI / 180.0;
    var ss = Math.abs( Math.sin( rads ) );
    var cc = Math.abs( Math.cos( rads ) );
    var padx = (e.height( ) * ss + e.width( ) * (cc - 1)) / 2;
    var pady = (e.width( ) * ss + e.height( ) * (cc - 1)) / 2;
    e.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',

        // remove any of these which you don't want
        'margin-top': pady,
        'margin-bottom': pady,
        'margin-left': padx,
        'margin-right': padx
    })
}

Answer 2

Play with the margin values

function degToRad(deg) {
    return Math.PI * deg / 180;
}
var height = img.height,
    width = img.width,
    rad = degToRad(deg),
    sin = Math.abs(Math.sin(rad)),
    cos = Math.abs(Math.cos(rad)),
    dh = cos * height + sin * width - height,
    dw = cos * width + sin * height - width;
$(img).css({
    'margin-top':    dh / 2 + 'px',
    'margin-bottom': dh / 2 + 'px',
    'margin-left':   dw / 2 + 'px',
    'margin-right':  dw / 2 + 'px'
});

DEMO