Javascript 如何旋转图元而不覆盖其下的图元？

我有一个应用程序，我的用户可能希望旋转显示的图像以更好地查看它们

我想我可以直接应用

-moz transform

和friends并完成它，但后来我意识到我的浏览器似乎没有像我预期的那样“推”出元素，结果是：

我的问题是：有没有一种方法可以让我旋转图像，同时让我的浏览器根据其新尺寸移动图像周围的元素

---

这里有一个JSFIDLE:。单击图像以旋转它并说明问题。

在纯CSS中，不是。但是您可以使用jQuery设置一些新的边距：

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
});

小提琴：

同样为了回答Panic上校的回答，这里有一个版本设置了所有4个边距：。在旋转中它有点不优雅，所以我建议只设置您实际想要更改的边距

完整（改编）代码：

---

在纯CSS中，没有。但是您可以使用jQuery设置一些新的边距：

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
});

小提琴：

同样为了回答Panic上校的回答，这里有一个版本设置了所有4个边距：。在旋转中它有点不优雅，所以我建议只设置您实际想要更改的边距

完整（改编）代码：

玩边距值

使用边距值

---

我喜欢这种方法，但它仍然存在问题：@ColonelPanic在这种情况下，只需将相同的值赋予margin top即可。如果需要，您也可以使用相同的逻辑设置左右边距。我喜欢这种方法，但它仍然存在问题：@ColonelPanic在这种情况下，只需将相同的值指定给边距顶部。如果需要，也可以使用相同的逻辑设置左右边距。

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'
});