Drehen ein Bild mit JavaScript

Shraddha Paghdar 20 März 2022
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:

vorher Bild in JS mit CSS drehen

Drehen Sie das Bild in JS mit CSS danach

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

Verwandter Artikel - JavaScript Image