Bild mit Javascript drehen

Muss ich ein Bild drehen mit javascript in 90-Grad-Intervallen. Ich habe versucht, ein paar Bibliotheken, wie jQuery drehen und Raphaëlaber Sie haben das gleiche problem - Das Bild wird gedreht, um seinen Mittelpunkt. Ich habe ein paar Inhalte auf allen Seiten des Bildes, wenn das Bild nicht perfekt Quadrat, Teile es wird am Ende oben auf, dass der Inhalt. Ich möchte das Bild der Aufenthalt im übergeordneten div, die max-mit und max-Höhe eingestellt.

Mit jQuery drehen, wie dies (http://jsfiddle.net/s6zSn/1073/):

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $("#image").rotate(angle);
});

Ergebnisse, in:

Bild mit Javascript drehen

Und das ist das Ergebnis möchte ich stattdessen:

Bild mit Javascript drehen

Jemand eine Idee, wie Sie dies bewerkstelligen?

InformationsquelleAutor der Frage TheQ | 2013-05-28

  1. 7
    var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $('#image').css('transform','rotate(' + angle + 'deg)');
});

    Versuchen, diesen code.

    InformationsquelleAutor der Antwort Harsha Venkatram

  2. 4

    ich habe gesehen, Ihr ausführen von code .Es ist eine Korrektur im code.
    schreiben
    $("#wrapper").rotate(Winkel);
    statt $("#image").rotate(Winkel); und erhalten Sie Ihre gewünschte Ausgabe,hoffe, das ist, was Sie wollen.

    InformationsquelleAutor der Antwort Prachi Jain

  3. 3

    CSS angewendet werden kann, und Sie transform-origin richtig, um die angewandte transformation in der Weise, die Sie wollen

    Sehen die fiddle:

    http://jsfiddle.net/OMS_/gkrsz/

    Haupt-code:

    /* assuming that the image's height is 70px */

img.rotated {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);

    transform-origin: 35px 35px;
    -webkit-transform-origin: 35px 35px;
    -moz-transform-origin: 35px 35px;
    -ms-transform-origin: 35px 35px;
}

    jQuery und JS:

    $(img)
    .css('transform-origin-x', imgWidth / 2)
    .css('transform-origin-y', imgHeight / 2);

//By calculating the height and width of the image in the load function

//$(img).css('transform-origin', (imgWidth /2) + ' ' + (imgHeight /2) );

    Logik:

    Teilen Sie die Höhe des Bildes durch 2. Die transform-x und transform-y Werte sollte dieser Wert

    Link:

    transform-origin bei CSS | MDN -

    InformationsquelleAutor der Antwort Om Shankar

  4. 3

    Hoffe das kann dir helfen!

    <input type="button" id="left"  value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">

<script>
 var angle = 0;
    $('#left').on('click', function () {  
        angle -= 90;
        $("#image").rotate(angle);
    });

    $('#right').on('click', function () {  
        angle += 90;
        $("#image").rotate(angle);
    });
</script>

    Versuchen Sie es

    InformationsquelleAutor der Antwort Man Sun

  5. 2

    Können Sie immer anwenden, CCS-Klasse mit rotate Eigenschaft - http://css-tricks.com/snippets/css/text-rotation/

    Halten gedrehtes Bild in Ihrem div Abmessungen, die Sie brauchen, anpassen CSS, es gibt keine Bedürfnisse, JavaScript zu verwenden, mit Ausnahme der Zugabe Klasse.

    InformationsquelleAutor der Antwort Wojciech Bednarski

Schreibe einen Kommentar