CSS: ruotare l’immagine e allinea in alto a sinistra

Sto cercando di ruotare un’immagine utilizzando un CSS trasformare in modo che rimanga allineato correttamente nei dintorni div, cioè l’angolo in alto a sinistra dell’immagine deve essere allineato con l’angolo in alto a sinistra della div.

Come si può vedere qui (-> fare clic su [rotate]) questo non funziona. C’è un modo per risolvere questo problema?

(Nota che io vorrei che utilizza questo online di un visualizzatore di immagini, quindi non posso inserire un offset per l’immagine ruotata. C’è un sacco di domande simili ma non ho trovato questa domanda esatta.)

  • hai usato ‘overflow:hidden’ proprietà div..?
  • overflow:hidden; sarebbe solo tagliare via parti dell’immagine, ma non correggere l’allineamento.



5 Replies
  1. 31

    Se si desidera che sia fatto in CSS, questo è il modo:

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

    demo aggiornata

    Il trucco è quello di ruotare l’immagine di tutto l’angolo in basso a sinistra. Una volta fatto, è giù per il 100% di altezza; tradurre e ora è ok.

    Per ottenere lo stesso effetto per la rotazione inversa: (posizionare trasformare)

    CSS:

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

    HTML:

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

    • Come sulla rotazione di 90 gradi? Quali altri valori devono cambiare, e per cosa?
    • aggiunto snippet per la rotazione inversa
  2. 4

    Utilizzando alcuni jQuery, è possibile ottenere il offset del padre, sottrarre che dal nuovo ruotato offset e utilizzare il margine di rimetterlo nel contenitore. Funziona con tutte le rotazioni. Qui è il Violino.

    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);
    });
    • Sir, si prega di avere il mio +1
  3. 3

    Dalle risposte date finora, ritengo che non vi è alcun approccio più semplice rispetto all’utilizzo di JavaScript per “riallineare” l’immagine. Permettetemi quindi di condividere l’approccio che ho finito per usare:

    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 è il id del <a> che io abusi come interruttore, myimage è (credo) il id del img per ruotare.

    Provare qui.

    • Super!!! Grazie… Questa era la mia grazia salvifica…
  4. 1

    Non so se c’è un modo più semplice, ma è possibile impostare il margine di immagine dopo la rotazione come questo.

    margin:68px -66px;

    Si può usare js per ottenere larghezza e altezza dell’immagine in modo che imposta i valori di conseguenza alla dimensione dell’immagine. Ho usato il metodo manuale.

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

    EDIT:

    Si può sempre pasticciare con

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

    come si trova qui: CSS “transform: rotate()” che influiscono design con “position: absolute” (non allineare correttamente)

  5. 0

    Colgo l’ @Perso Sinistra Stack esempio e modificato per funzionare con tutte le rotazioni, e di essere ripetitivo.
    Azzera i margini per ripetute rotazioni.
    Anche impostare a destra e in basso i margini.

    function rotateImage(elm, deg) {
        $(elm).css('margin-left', 0).css('margin-top', 0);
        $(elm).css('transform', 'rotate(' + deg + 'deg)');
        //Get the container offset
        var offsetContLeft = $(elm).parent().offset().left;
        var offsetContTop = $(elm).parent().offset().top;
        //get the new rotated offset
        var offsetLeft = $(elm).offset().left;
        var offsetTop = $(elm).offset().top;
        //Subtract the two offsets.
        var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
        var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
        $("#a").text(newOffsetX + "-" + newOffsetY)
        //Apply the new offsets to the margin of the element.
          $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
              .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY);
    }
    var rot = 0;
    $("#myrotate").click(function (e) { 
    rot += 15;
          rotateImage('#myimage', rot);
    });

    esempio: http://jsfiddle.net/v4qa0x5g/2/

Lascia un commento