<transform-function>

Syntax

Der <transform-function> Datentyp wird durch eine der unten aufgeführten Transformationsfunktionen spezifiziert. Jede Funktion wendet eine geometrische Operation entweder im 2D- oder 3D-Raum an.

Matrixtransformation

matrix()

Beschreibt eine homogene 2D-Transformationsmatrix.

matrix3d()

Beschreibt eine 3D-Transformation als 4×4 homogenene Matrix.

Perspektive

perspective()

Setzt den Abstand zwischen dem Benutzer und der Ebene z=0.

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 (Neugrößeneinstellung)

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.

Verzerrung

skew()

Verzerrt ein Element auf der 2D-Ebene.

skewX()

Verzerrt ein Element in horizontaler Richtung.

skewY()

Verzerrt ein Element in vertikaler Richtung.

Übersetzung (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. Am häufigsten wird das kartesische Koordinatensystem verwendet, obwohl manchmal auch homogene Koordinaten Anwendung finden.

Kartesische Koordinaten

Im kartesischen Koordinatensystem wird ein zweidimensionaler Punkt durch zwei Werte beschrieben: eine x-Koordinate (Abszisse) und eine y-Koordinate (Ordinate). Dies wird durch die Vektorschreibweise (x, y) dargestellt.

In CSS (und den meisten Computer-Grafiken) repräsentiert der Ursprung (0, 0) die obere linke Ecke eines beliebigen Elements. Positive Koordinaten liegen unterhalb und rechts vom Ursprung, während negative Koordinaten oberhalb und links davon liegen. Ein Punkt, der sich 2 Einheiten rechts und 5 Einheiten unten befindet, wäre (2, 5), während ein Punkt 3 Einheiten links und 12 Einheiten oben (-3, -12) wäre.

Transformationsfunktionen

Transformationsfunktionen verändern das Erscheinungsbild eines Elements durch Manipulation der Werte seiner Koordinaten. Eine lineare Transformationsfunktion wird durch eine 2×2-Matrix beschrieben, wie folgt:

Die Funktion wird auf ein Element durch Matrizenmultiplikation angewendet. Dabei ändert sich jede Koordinate basierend auf den Werten in der Matrix:

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

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

Eine wichtige Transformation ist jedoch nicht linear und muss daher bei Verwendung dieser Notation speziell behandelt werden: die Verschiebung. Der Verschiebungsvektor (tx, ty) muss separat als zwei zusätzliche Parameter ausgedrückt werden.

Beispiele

Vergleich von Transformationsfunktionen

Das folgende Beispiel bietet einen 3D-Würfel, der aus DOM-Elementen und Transformationen erstellt wurde, und ein Auswahlmenü, mit dem Sie verschiedene Transformationsfunktionen auswählen können, um den Würfel zu transformieren. So können Sie die Effekte der verschiedenen Typen 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

<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

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

Browser-Kompatibilität

Siehe auch

• CSS transform Eigenschaft
• Individuelle Transform-Eigenschaften:
  • translate
  • scale
  • rotate