Kursvorschlag:

CSS perspective() Funktion

Definition und Verwendung perspective() CSS

perspective() Die Funktion definiert den Abstand des Benutzers zum Plan z=0. transform im Attribut.

Beispiel

Verwenden Sie perspective() Fügen Sie einigen Perspektiven für zwei Würfel hinzu:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Versuchen Sie es selbst

CSS Syntax

perspective(length|none)
Wert Beschreibung
length Notwendig. Angibt die Entfernung des Benutzers zum Plan z=0. 'none' bedeutet keine Transformation.

Technische Details

Version: CSS Transforms Modul Niveau 2

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Verwandte Seiten

Anleitung:CSS 3D-Transformation

Referenz:CSS transform Eigenschaft

Referenz:CSS rotate() Funktion

Referenz:CSS rotate3d() Funktion

Referenz:CSS rotateX() Funktion

Referenz:CSS rotateY() Funktion

Referenz:CSS rotateZ() Funktion