如何旋轉元素而不覆蓋下面的元素？

我有一個應用程序，我的用戶可能想旋轉它們顯示的圖像以更好地查看它們。如何旋轉元素而不覆蓋下面的元素？

我想我可以只申請-moz-transform和朋友，用它做的，但後來我意識到，我的瀏覽器似乎沒有了像我期望的那樣「推」的元素，造成這樣的：

oops

我的問題是：有沒有一種方法可以讓我旋轉圖像，同時讓我的瀏覽器圍繞它的新維度移動元素？

這是一個JSFiddle：http://jsfiddle.net/8pFUB/。點擊圖片旋轉並說明問題。

2013-08-05 Fredrick Brennan

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

小提琴：http://jsfiddle.net/8pFUB/21/

而且回覆上校恐慌的答案，這裏是將所有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 
    }) 
}

來源

2013-08-05 00:36:19 Dave

我喜歡這種方法，但它仍然有問題：HTTP：/ /jsfiddle.net/8pFUB/22/ –

@ColonelPanic在這種情況下，也只是給予margin-top以相同的值。如果需要，也可以使用相同的邏輯來設置左右頁邊距。 – Dave

你是@Dave！它效果很好。 –

播放與保證金值

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

來源

2013-08-05 00:44:25

如何旋轉元素而不覆蓋下面的元素？

回答

相關問題