`<transform-function>` CSS-Typ

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Der <transform-function> CSS Datentyp repräsentiert eine Transformation, die das Erscheinungsbild eines Elements beeinflusst. Transformationsfunktionen können ein Element im 2D- oder 3D-Raum rotieren, skalieren, verzerren oder verschieben. Es wird in der transform-Eigenschaft verwendet.

Syntax

Der <transform-function>-Datentyp wird mit einer der unten aufgelisteten Transformationsfunktionen angegeben. Jede Funktion führt eine geometrische Operation entweder in 2D oder 3D durch.

Matrixtransformation

matrix(): Beschreibt eine homogene 2D-Transformationsmatrix.
matrix3d(): Beschreibt eine 3D-Transformation als 4×4-homogene Matrix.

Perspektive

perspective(): Legt den Abstand zwischen dem Benutzer und der Ebene z=0 fest.

Rotation

rotate(): Rotiert ein Element um einen festen Punkt auf der 2D-Ebene.
rotate3d(): Rotiert ein Element um eine feste Achse im 3D-Raum.
rotateX(): Rotiert ein Element um die horizontale Achse.
rotateY(): Rotiert ein Element um die vertikale Achse.
rotateZ(): Rotiert ein Element um die z-Achse.

Skalierung (Größenanpassung)

scale(): Skaliert ein Element auf der 2D-Ebene nach oben oder unten.
scale3d(): Skaliert ein Element im 3D-Raum nach oben oder unten.
scaleX(): Skaliert ein Element horizontal nach oben oder unten.
scaleY(): Skaliert ein Element vertikal nach oben oder unten.
scaleZ(): Skaliert ein Element entlang der z-Achse nach oben oder unten.

Scherung (Verzerrung)

skew(): Verzerrt ein Element auf der 2D-Ebene.
skewX(): Verzerrt ein Element in horizontaler Richtung.
skewY(): Verzerrt ein Element in vertikaler Richtung.

Translation (Verschiebung)

translate(): Verschiebt ein Element auf der 2D-Ebene.
translate3d(): Verschiebt ein Element im 3D-Raum.
translateX(): Verschiebt ein Element horizontal.
translateY(): Verschiebt ein Element vertikal.
translateZ(): Verschiebt ein Element entlang der z-Achse.

Beschreibung

Verschiedene Koordinatenmodelle können verwendet werden, um die Größe und Form eines HTML-Elements sowie alle darauf angewendeten Transformationen zu beschreiben. Das gebräuchlichste ist das kartesische Koordinatensystem, obwohl manchmal auch homogene Koordinaten verwendet werden.

Kartesische Koordinaten

Im kartesischen Koordinatensystem wird ein zweidimensionaler Punkt mit zwei Werten beschrieben: einer x-Koordinate (Abszisse) und einer y-Koordinate (Ordinate). Dies wird durch die Vektornotation (x, y) dargestellt.

Eine kartesische Ebene, die die negative Y- und positive X-Achse darstellt, beginnend am Ursprung mit drei Punkten P1, P2 und P3 mit den entsprechenden X- und Y-Werten

In CSS (und den meisten Computergrafiken) repräsentiert der Ursprung (0, 0) die obere linke Ecke eines Elements. Positive Koordinaten befinden sich rechts und unten vom Ursprung, während negative sich links und oben befinden. Ein Punkt, der 2 Einheiten nach rechts und 5 Einheiten nach unten liegt, wäre (2, 5), während ein Punkt 3 Einheiten nach links und 12 Einheiten nach oben (-3, -12) wäre.

Transformationsfunktionen

Transformationsfunktionen verändern das Erscheinungsbild eines Elements, indem sie die Werte seiner Koordinaten manipulieren. Eine lineare Transformationsfunktion wird mit einer 2×2-Matrix beschrieben, wie folgt:

\begin{pmatrix} a & c \\ b & d \end{pmatrix}

Die Funktion wird auf ein Element angewendet, indem die Matrixmultiplikation verwendet wird. So ändern sich die Koordinaten basierend auf den Werten in der Matrix:

\left( \begin{array}{cc} a & c \\ b & d \end{array} \right) \left( \begin{array}{c} x \\ y \end{array} \right) = \left( \begin{array}{c} ax + cy \\ bx + dy \end{array} \right)

Es ist sogar möglich, mehrere Transformationen nacheinander anzuwenden:

\left( \begin{array}{cc} a_1 & c_1 \\ b_1 & d_1 \end{array} \right) \left( \begin{array}{cc} a_2 & c_2 \\ b_2 & d_2 \end{array} \right) = \left( \begin{array}{cc} a_1a_2 + c_1b_2 & a_1c_2 + c_1d_2 \\ b_1a_2 + d_1b_2 & b_1c_2 + d_1d_2 \end{array} \right)

Mit dieser Notation ist es möglich, die meisten gängigen Transformationen zu beschreiben und somit zu kombinieren: Rotationen, Skalierung oder Scherung. (Tatsächlich können alle Transformationen, die lineare Funktionen sind, beschrieben werden.) Zusammengesetzte Transformationen werden effektiv in der Reihenfolge von rechts nach links angewendet.

Es gibt jedoch eine wichtige Transformation, die nicht linear ist und daher in dieser Notation eine Sonderbehandlung erfordert: die Translation. Der Translationsvektor (tx, ty) muss separat als zwei zusätzliche Parameter ausgedrückt werden.

Hinweis: Obwohl komplexer als kartesische Koordinaten, führen homogene Koordinaten in der projektiven Geometrie zu 3×3-Transformationsmatrizen und können Translationen als lineare Funktionen ausdrücken.

Hinweis: Transformationsfunktionen werden mit der transform-Eigenschaft verwendet, aber nicht mit den einzelnen Transformator-Eigenschaften translate, scale, und rotate.

Beispiele

Vergleich von Transformationsfunktionen

Das folgende Beispiel zeigt einen 3D-Würfel, der aus DOM-Elementen und Transformationen erstellt wurde, sowie ein Auswahlmenü, mit dem Sie verschiedene Transformationsfunktionen auswählen können, um den Würfel zu transformieren und so die Effekte der verschiedenen Typen zu vergleichen.

Wählen Sie eine aus, und die Transformation wird auf den Würfel angewendet; nach 2 Sekunden kehrt der Würfel in seinen Ausgangszustand zurück. Der Ausgangszustand des Würfels ist leicht mit transform3d() rotiert, damit Sie den Effekt aller Transformationen sehen können.

HTML

html

<main>
  <section id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </section>

  <div class="select-form">
    <label for="transfunction">Select a transform function</label>
    <select id="transfunction">
      <option selected>Choose a function</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>

CSS

css

main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}

JavaScript

const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  }
  example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
  setTimeout(() => {
    example.style.transform = "rotate3d(1, 1, 1, 30deg)";
  }, 2000);
});

Ergebnis

Spezifikationen

Spezifikation
CSS Transforms Module Level 1 # transform-functions
CSS Transforms Module Level 2 # transform-functions

Browser-Kompatibilität

Siehe auch

CSS transform-Eigenschaft
Einzelne Transformator-Eigenschaften:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<transform-function> CSS-Typ

HTML

CSS

JavaScript

Ergebnis

Help improve MDN

`<transform-function>` CSS-Typ