CSSRotate
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Schnittstelle CSSRotate der CSS Typed Object Model API repräsentiert den Wert einer Rotationsfunktion in der CSS-Eigenschaft transform.
Konstruktor
CSSRotate()-
Erstellt ein neues
CSSRotate-Objekt.
Instanzeigenschaften
Erbt außerdem Eigenschaften von der übergeordneten Schnittstelle CSSTransformComponent.
Instanzmethoden
Erbt außerdem Methoden von der übergeordneten Schnittstelle CSSTransformComponent.
Beschreibung
Die Schnittstelle CSSRotate wird verwendet, um Rotationsfunktionen in einer Liste von <transform-function>s darzustellen, die für eine CSS-Eigenschaft transform definiert sind.
Dazu gehören Rotationen, die mit rotate(), rotate3d(), rotateX(), rotateY() oder rotateZ() deklariert wurden.
Die Liste selbst wird durch ein CSSTransformValue-Objekt repräsentiert. Sie können darüber iterieren, um die Objekte zu erhalten, die die einzelnen Funktionen repräsentieren. Die Liste kann auch Objekte enthalten, die andere Transformationen repräsentieren.
Eine Rotation wird durch einen Achsenvektor (x, y, z) und einen Rotationswinkel angle um diese Achse definiert.
Die Konstruktorform mit zwei Argumenten ist eine Kurzform für eine Rotation um die z-Achse: Sie setzt den Achsenvektor auf (0, 0, 1). Deshalb entspricht eine zweidimensionale CSS-Funktion rotate() dem Ausdruck rotate3d(0, 0, 1, angle).
Mit der Form mit vier Argumenten können Sie für eine beliebige 3D-Rotation jede beliebige Achse angeben.
Beispiele
Grundlegende Verwendung
Dieses Beispiel erstellt ein CSSRotate-Objekt und gibt dessen Struktur und Eigenschaften im Protokoll aus.
const rotate = new CSSRotate(CSS.deg(45));
console.log(rotate); // CSSRotate {x: CSSUnitValue, y: CSSUnitValue, z: CSSUnitValue, angle: CSSUnitValue, is2D: true}
console.log(rotate.angle.value, rotate.angle.unit); // 45 "deg"
console.log(rotate.x.value, rotate.y.value, rotate.z.value); // 0 0 1
console.log(rotate.toString()); // "rotate(45deg)"
Schrittweises Erhöhen einer Rotation
Dieses Beispiel zeigt, wie CSSRotate verwendet werden kann.
Beachten Sie, dass es verborgenen Protokollierungscode gibt, der für das Beispiel nicht relevant ist.
HTML
Zuerst definieren wir die Elemente für das zu rotierende Kästchen und die Schaltfläche, mit der wir es rotieren.
<div id="increment-box"></div>
<button id="increment-button">Rotate 15°</button>
CSS
Das CSS für das Kästchen, das wir rotieren, ist unten dargestellt. Beachten Sie, dass das Kästchen anfangs um 15 Grad gedreht ist.
#increment-box {
width: 100px;
height: 100px;
margin-bottom: 1rem;
background-color: #6666dd;
transform: rotate(15deg);
transition: transform 0.3s ease;
}
JavaScript
Der Code ruft zunächst eine Referenz auf das Kästchen ab, das wir rotieren. Anschließend verwendet er computedStyleMap(), um den anfänglichen Rotationswinkel abzurufen und im Protokoll auszugeben.
const incrementBox = document.getElementById("increment-box");
let angle = incrementBox.computedStyleMap().get("transform")[0].angle.value;
log(`initial angle: ${angle}deg`);
Dann rufen wir die Schaltfläche ab und fügen einen Handler hinzu, der das Kästchen bei jedem Klick auf die Schaltfläche um 15 Grad weiterdreht.
Beachten Sie, dass wir die Rotation mit CSSRotate definieren, sie einem CSSTransformValue hinzufügen und diesen Wert dann als Stil für das Kästchen festlegen.
const incrementButton = document.getElementById("increment-button");
incrementButton.addEventListener("click", () => {
angle = (angle + 15) % 360;
const rotate = new CSSRotate(CSS.deg(angle));
incrementBox.attributeStyleMap.set(
"transform",
new CSSTransformValue([rotate]),
);
log(`angle: ${angle}deg`);
});
Ergebnis
Zu Beginn dieses Beispiels ist das Kästchen durch CSS bereits um 15deg gedreht.
Klicken Sie auf die Schaltfläche, um es weiterzudrehen.
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # cssrotate |