javascript - 如何在不覆盖其下的元素的情况下旋转元素？

Question

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

我想我可以只应用 -moz-transform 和 friend 并完成它，但后来我意识到我的浏览器似乎并没有像我期望的那样“推开”元素，结果是:

我的问题是:有没有办法让我旋转图像，同时让我的浏览器根据图像的新尺寸移动图像周围的元素？

这是一个 JSFiddle:http://jsfiddle.net/8pFUB/ .单击图像将其旋转并说明问题。

Answer 1

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

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

同时回复 Panic 上校的回答，这里是一个设置所有 4 个边距的版本:http://jsfiddle.net/8pFUB/24/ .旋转有点不那么优雅，所以我建议只设置你真正想要改变的边距。

完整(改编)代码:

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