CSS：旋轉圖像並對齊左上角

Question

我想旋轉圖像使用CSS變換，使其保持正確對齊在周圍div，即圖像的左上角應與左上角對齊div。

正如你所看到的here（ - >點擊[rotate]）這是行不通的。有沒有辦法來解決這個問題？

（請注意，我在網上的圖像瀏覽器可以使用這個，所以我不能硬編碼爲旋轉圖像的偏移量。還有很多類似的問題，但我還沒有找到這個確切的問題。）

Answer 1

我不知道是否有更簡單的方法，但可以像這樣旋轉後設置圖像邊距。

margin:68px -66px; 

您可以用js來獲得圖像的寬度和高度，以便它設置相應的值，以圖像的大小。我使用手動方式。

http://jsfiddle.net/YQktn/3/

編輯：

您可以隨時惹

-webkit-transform-origin: 75px 75px; 
-moz-transform-origin: 75px 75px; 
-ms-transform-origin: 75px 75px; 
-o-transform-origin: 75px 75px; 
transform-origin: 75px 75px; 

爲在這裏找到：CSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)

Answer 2

使用一些jQuery的，你可以得到父母的offset，減從新的旋轉offset，並使用餘量放回容器。它適用於所有旋轉。這裏是the Fiddle。

JS：

function rotate(elm, deg) { 
    var offsetContLeft, offsetContTop, offsetLeft, offsetTop, newLeft, newTop; 
    $(elm).css('transform', 'rotate('+ deg +'deg)'); 
    // Get the container offset 
    offsetContLeft = $(elm).parent().offset().left; 
    offsetContTop= $(elm).parent().offset().top; 
    // get the new rotated offset 
    offsetLeft = $(elm).offset().left; 
    offsetTop = $(elm).offset().top; 
    // Subtract the two offsets. 
    newLeft = offsetContLeft - offsetLeft; 
    newTop = offsetContTop - offsetTop; 
    // Apply the new offsets to the margin of the element. 
    $(elm).css('margin-left', newLeft).css('margin-top', newTop); 
} 

$("#myrotate").click(function (e) { 
     // pass in the element to rotate and the desired rotation. 
     rotate('#myimage', 90); 
}); 

Answer 3

從迄今我把它給出的答案，有比使用JavaScript來「重新調整」的形象沒有簡單的方法。因此，讓我分享，我結束了使用方法：

var step = 0; 

$("#myrotate").click(
    function (e) { 
    step += 1; 
    var img = $("#myimage"); 
    img.css('transform', 'rotate('+ step*90 +'deg)'); // could be extended to work also in older browsers 
    var d = img.width() - img.height(); 
    img.css('margin-left', -d/2*(step%2)); 
    img.css('margin-top', d/2*(step%2)); 
    } 
); 

myrotate是<a>我虐待開關的id，myimage是（猜測）的img的id旋轉。

試試吧here。

Answer 4

如果你希望它在CSS來完成，這是這樣的：

.rot90 { 
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */ 
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */ 
    /*-moz-transform-origin: right top; */ 
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */ 
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */ 
    transform: translateY(-100%) rotate(90deg); /* W3C */ 
    -webkit-transform-origin: left bottom; 
    -moz-transform-origin: left bottom; 
    -ms-transform-origin: left bottom; 
    -o-transform-origin: left bottom; 
    transform-origin: left bottom; 
} 

updated demo

關鍵是要圍繞左下角旋轉圖像。一旦完成，它會下降100％的高度;翻譯它，現在沒關係。

要獲取反向旋轉相同的效果：（懸停改造）

div:hover #myimage { 
 
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */ 
 
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */ 
 
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */ 
 
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */ 
 
    transform: translateX(-100%) rotate(-90deg); /* W3C */ 
 
    -webkit-transform-origin: top right; 
 
    -moz-transform-origin: top right; 
 
    -ms-transform-origin: top right; 
 
    -o-transform-origin: top right; 
 
    transform-origin: top right; 
 
}

<div style="border: 1px solid red;"> 
 
    <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" /> 
 
</div>