Der -Datentyp wird unter Verwendung einer der unten aufgeführten Transformationsfunktionen angegeben. Jede Funktion wendet eine geometrische Operation entweder in 2D oder 3D an.

matrix()

Beschreibt eine homogene 2D-Transformationsmatrix.

matrix3d()

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

perspective()

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

rotate()

Dreht ein Element um einen festen Punkt auf der 2D-Ebene.

rotate3d()

Dreht ein Element um eine feste Achse im 3D-Raum.

rotateX()

Dreht ein Element um die horizontale Achse.

rotateY()

Dreht ein Element um die vertikale Achse.

rotateZ()

Dreht ein Element um die z-Achse.

scale()

Skaliert ein Element auf der 2D-Ebene hoch oder herunter.

scale3d()

Skaliert ein Element im 3D-Raum hoch oder herunter.

scaleX()

Skaliert ein Element horizontal hoch oder herunter.

scaleY()

Skaliert ein Element vertikal hoch oder herunter.

scaleZ()

Skaliert ein Element entlang der z-Achse hoch oder herunter.

skew()

Verzerrt ein Element auf der 2D-Ebene.

skewX()

Verzerrt ein Element in horizontaler Richtung.

skewY()

Verzerrt ein Element in vertikaler Richtung.

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.

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.

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

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

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

Die Funktion wird auf ein Element angewendet, indem Matrizenmultiplikation verwendet wird. So ändert sich jede Koordinate basierend auf den Werten in der Matrix:

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

Mit dieser Notation ist es möglich, die meisten gängigen Transformationen zu beschreiben und somit zu kombinieren: Drehungen, 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.

Jedoch ist eine wesentliche Transformation nicht linear und muss daher speziell behandelt werden, wenn diese Notation verwendet wird: die Translation. Der Translationsvektor (tx, ty) muss separat als zwei zusätzliche Parameter ausgedrückt werden.

Das folgende Beispiel bietet einen 3D-Würfel, der aus DOM-Elementen und Transformationen erstellt wurde, sowie ein Auswahlmenü, das Ihnen ermöglicht, verschiedene Transformationsfunktionen auszuwählen, um den Würfel zu transformieren, sodass Sie die Effekte der verschiedenen Typen vergleichen können.

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

HTML

  

    
1
    
2
    
3
    
4
    
5
    
6
  

  

    Select a transform function
    
      Choose a function
      rotate(360deg)
      rotateX(360deg)
      rotateY(360deg)
      rotateZ(360deg)
      rotate3d(1, 1, 1, 90deg)
      scale(1.5)
      scaleX(1.5)
      scaleY(1.5)
      scaleZ(1.5)
      scale3d(1, 1.5, 1.5)
      skew(17deg, 13deg)
      skewX(17deg)
      skewY(17deg)
      translate(100px, 100px)
      translateX(100px)
      translateY(100px)
      translateZ(100px)
      translate3d(50px, 50px, 50px)
      perspective(200px)
      matrix(1, 2, -1, 1, 80, 80)
      matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)
    
  

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: #fff;
}

.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

• CSS transform-Eigenschaft
• Einzelne Transformations-Eigenschaften:
  • translate
  • scale
  • rotate