Wie 90°-drehen Sie ein Bild oder ein Objekt in HTML/Javascript in Windows 8/IE10?

Folgenden code:

<html>
    <body onload="x=0" onkeydown="document.images[0].style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation='+(x=++x%4)+')'">
    <img src="DSCF0353.jpg" height=900>
</html>

Warum ist es, dass diese, wodurch ein Bild angezeigt Zyklus 90° - Drehungen auf jeder Tastenanschlag in Windows 7/IE9, wäre NICHT so in Windows 8/IE10 (das Bild nicht drehen)?
Welchen code produzieren WÜRDE, die Rotationen in Windows 8/IE10 (ÄHNLICH wie, wenn möglich, von oben)?

  • ie10 erkennt CSS3-Eigenschaften. So kann u verwenden, drehen Sie die css-Eigenschaft, um Elemente drehen.
  • sehen Sie dis stackoverflow.com/questions/7117445/...
  • IE9 unterstützt CSS3 verwandelt schon, aber Microsoft sank die Nutzung von legacy-filtern in IE10.
InformationsquelleAutor Ron Obvious | 2013-01-10
  1. 1

    Danke für die drei Antworten, die ich bekam. Sandeep Verweis auf die css3 - drehen Eigenschaft schien, die direkte Lösung, und ich folgte es, zu entdecken, die einfachste Antwort hier: Drehen von text mit CSS3/HTML5 erlaubt mir, direkt vergleichen alte und neue Methoden, die zu dieser überarbeiteten code:

    <html>
   <body onload="x=0" onkeydown="document.images[0].style.msTransform='rotate('+((x=++x%4)*90)+'deg)'">
   <img src="DSCF0353.jpg" height=900>
</html>

    Dies ermöglicht es mir, siehe Grad direkt, anstatt die Umwandlung von Pi-basierten Bogenmaß. Und 90-Grad-Schritten sind bequem, aber die neue Methode (wie die anderen Vorschläge) können andere Winkel als gut, an der Tropfen einen sprichwörtlichen Hut.

    Einen leichten Unterschied im Verhalten ist, daß bei der ALTEN Methode, die physikalische position der linken oberen Ecke des Bildes als angezeigt konstant ist; bei der NEUEN Methode, die position der MITTE des Bildes bei der Anzeige auf die 0-Grad-Drehung wird der Mittelpunkt der Drehung des Bildes.

    Andere Aspekt ist, dass, vor, Drehbarkeit erforderlich, dass das Bild irgendeine Art von Formatierung angewendet wurde (in diesem Fall, die Einstellung der Höhe um 900); diese Voraussetzung nicht mehr gilt.

    NACHTRAG: Apropos Positionierung, das führte mich zu dieser nützliche Antwort: Wie die Anwendung mehrere Transformationen in CSS? über die Kombination von Drehung und Neupositionierung ("übersetzen"). Setzen drehen(r) und translate(x,y) einer nach dem anderen in einer einzigen Zeile, getrennt durch ein Raum. Beachten Sie, dass die Operationen durchgeführt werden um:

    Wenn übersetzen ist das erste, das Bild ist verschoben um den angegebenen Betrag ("px" für Pixel) in seiner ursprünglichen Ausrichtung, dann gedreht über die neue position von seiner Mitte;

    Wenn drehen ist zunächst (wie in der referenzierten Seite) das Bild wird gedreht über seine ursprüngliche Zentrum, dann verschoben, indem die angegebene Menge in der relativen (gedrehte) Koordinatensystem des Bildes gedreht.

    InformationsquelleAutor Ron Obvious
  2. -1

    Verwenden jQuery-plugin drehen die dazu bestimmt ist, genau für, die.

    • Sie kann nicht Antworten auf alles, was mit jQuery.
    • Warum denkst du, dass das nicht die Lösung hier?
    InformationsquelleAutor Roy
Schreibe einen Kommentar