CSS: obracanie obrazu i wyrównanie u góry po lewej

Question

Próbuję obrócić obraz przy użyciu transformacji CSS, tak aby był prawidłowo wyrównany w otaczającym obiekcie div, tzn. Lewy górny róg obrazu powinien być wyrównany do lewego górnego rogu obrazu. div.

Jak widać here (-> kliknij na [rotate]) to nie działa. Czy istnieje sposób, aby to naprawić?

(Zauważ, że będę przy użyciu tego w przeglądarce zdjęć on-line, więc nie mogę zakodować przesunięcie do obróconego obrazu. Jest wiele podobnych pytań, ale nie znalazłem dokładnie to pytanie.)

Answer 1

Nie wiem, czy istnieje prostszy sposób, ale można ustawić margines obrazu po takim obrocie.

margin:68px -66px; 

Możesz użyć js, aby uzyskać szerokość i wysokość obrazu, aby ustawić wartości zgodnie z rozmiarem obrazu. Użyłem drogi ręcznej.

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

EDIT:

Możesz zawsze bałagan z

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

jak znaleźć tutaj: CSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)

Answer 2

Korzystanie trochę jQuery, można uzyskać offset rodzica, odejmowanie to z nowego obróconego offset i użyj marginesu, aby umieścić go z powrotem do pojemnika. Działa ze wszystkimi obrotami. Oto 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

Z odpowiedzi udzielonych do tej pory biorę go, że nie ma prostsze podejście niż przy użyciu JavaScript, aby „wyrównać” obrazu. Niech mi zatem dzielić podejście, które skończyło się przy użyciu:

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 jest id z <a> które nadużywania jako przełącznik, myimage jest (chyba) id z img obrócić.

Wypróbuj here.

Answer 4

Jeśli chcesz to zrobić w CSS, jest to sposób:

.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

Sztuką jest, aby obrócić obraz wokół lewym dolnym rogu. Po zakończeniu zmniejsza się o 100% wysokości; przetłumacz to i teraz jest w porządku.

Aby uzyskać ten sam efekt odwrotny do obrotu (aktywowanych przekształcenia)

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>