Drehen ein Bild mit JavaScript

Das Drehen eines HTML-Elements ist eine häufige Anforderung, die mit CSS ausgeführt wird. CSS stellt eine Transformationseigenschaft bereit, die Sie verwenden können, um diese Aufgabe zu erfüllen. In diesem Artikel erfahren Sie, wie Sie Bilder mit JavaScript drehen.

Drehen ein Bild mit JavaScript mithilfe von CSS Transform

Mit der CSS-Transformationseigenschaft können Sie ein Element drehen, skalieren, neigen oder verschieben. Ändern Sie den Koordinatenraum des visuellen CSS-Formatmodells. Ein Stacking-Kontext wird erstellt, wenn die Eigenschaft einen anderen Wert als none hat. In diesem Fall fungiert das Element als Containerblock, dessen Position entweder als position: fixed oder position: absolute festgelegt wird, je nachdem, welche Elemente es enthält.

Die Transformationseigenschaft kann entweder als Schlüsselwort none oder als eine oder mehrere transform-Funktionen angegeben werden. Wenn perspective() einer von mehreren Funktionswerten ist, muss er zuerst erscheinen.

Syntax:

transform: none;
transform: translateX($Xpx) rotate($Ydeg) translateY($Zpx);

Transformationswerte sind transform-function, wenn eine oder mehrere der CSS-Transformationsfunktionen angewendet werden sollen. Transformationsfunktionen werden von links nach rechts multipliziert. Von rechts nach links zusammengesetzte Transformationen werden effektiv angewendet. In der obigen Syntax verwenden wir translateX, das ein Element mit einem bestimmten Pixel horizontal übersetzt, translateY, das ein Element mit einem bestimmten Pixel vertikal übersetzt, und rotate, das ein Element um einen bestimmten Grad um a dreht Fixpunkt auf der 2D-Ebene.

none gibt an, dass keine Transformation angewendet werden soll. Weitere Informationen finden Sie in der transform-Dokumentation.

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

let angle = 0, img = document.getElementById('img_container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = 'rotate' + angle;
}

#img_container.rotate90 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#img_container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}

Im obigen Code erstellen wir einen Container, und jedes Mal, wenn der Benutzer auf die Schaltfläche Rotate klickt, addieren wir 90 Grad zum aktuellen Winkel und nehmen den Modul von 360 Grad. Sobald der endgültige Winkel gefunden ist, können wir die vordefinierten Klassen hinzufügen, deren Eigenschaften mit CSS deklariert wurden.

Das Beispiel zeigt nur eine 90-Grad-Drehung, aber Sie können einen beliebigen Winkel wie 45 Grad oder 105 Grad usw. definieren. Die Ausgabe des obigen Codes sieht so aus: