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 CSSRotate-Schnittstelle der CSS Typed Object Model API repräsentiert den Wert einer Rotationsfunktion in der transform-Eigenschaft in CSS.
Konstruktor
CSSRotate()-
Erstellt ein neues
CSSRotate-Objekt.
Instanzeigenschaften
Erbt außerdem Eigenschaften von seiner übergeordneten Schnittstelle CSSTransformComponent.
Instanzmethoden
Erbt außerdem Methoden von seiner übergeordneten Schnittstelle CSSTransformComponent.
Beschreibung
Die CSSRotate-Schnittstelle wird verwendet, um Rotationsfunktionen in einer Liste von <transform-function>s zu repräsentieren, die für eine CSS-transform-Eigenschaft definiert sind.
Dies umfasst Rotationen, die mit folgenden Funktionen deklariert werden: rotate(), rotate3d(), rotateX(), rotateY() oder rotateZ().
Die Liste selbst wird durch ein CSSTransformValue-Objekt repräsentiert, das iteriert werden kann, um die Objekte zu erhalten, die die einzelnen Funktionen repräsentieren (und möglicherweise Objekte enthält, die andere Transformationen repräsentieren).
Eine Rotation wird durch einen Achsenvektor (x, y, z) und einen angle der Rotation um diese Achse definiert.
Die Konstruktorform mit 2 Argumenten ist eine Kurzform für eine Rotation um die z-Achse: Sie setzt die Achse auf (0, 0, 1). Deshalb entspricht ein 2D-CSS-rotate() rotate3d(0, 0, 1, angle).
Mit der Form mit 4 Argumenten können Sie jede beliebige Achse für eine beliebige 3D-Rotation angeben.
Beispiele
Grundlegende Verwendung
Dieses Beispiel erstellt ein CSSRotate 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)"
Erhöhen einer Rotation
Dieses Beispiel demonstriert, wie CSSRotate verwendet werden könnte.
Beachten Sie, dass es ausgeblendeten Protokollierungscode gibt, der für das Beispiel nicht relevant ist.
HTML
Zuerst definieren wir die Elemente für das zu rotierende Feld sowie die Schaltfläche, mit der wir es drehen.
<div id="increment-box"></div>
<button id="increment-button">Rotate 15°</button>
CSS
Das CSS für das Feld, das wir drehen werden, ist unten dargestellt. Beachten Sie, dass das Feld anfangs um 15 Grad gedreht ist.
#increment-box {
width: 100px;
height: 100px;
margin-bottom: 1rem;
background-color: #66d;
transform: rotate(15deg);
transition: transform 0.3s ease;
}
JavaScript
Der Code ruft zunächst eine Referenz auf das Feld ab, das wir drehen, und verwendet dann computedStyleMap(), um den anfänglichen Transformationswinkel abzurufen und zu protokollieren.
const incrementBox = document.getElementById("increment-box");
let angle = incrementBox.computedStyleMap().get("transform")[0].angle.value;
log(`initial angle: ${angle}deg`);
Anschließend rufen wir die Schaltfläche ab und fügen einen Handler hinzu, der sie bei jedem Klick auf die Schaltfläche um 15 Grad dreht.
Beachten Sie, dass wir CSSRotate verwenden, um die Rotation zu definieren, sie einem CSSTransformValue hinzufügen und dieses dann als Stil für das Feld 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
Dieses Beispiel beginnt mit einem Feld, das in CSS bereits um 15deg gedreht ist.
Klicken Sie auf die Schaltfläche, um es zu drehen.
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # cssrotate |