css mit Adi Prinz

Verschiebung entlang der z-Achse

Mit translateZ() wird ein Element entlang der z-Achse verschoben. Dadurch bewegt es sich optisch zum Betrachter oder vom Betrachter weg.

.element {
  transform: translateZ(80px);
}
    

• Ein positiver Wert bewegt das Element zum Betrachter.
• Ein negativer Wert bewegt das Element vom Betrachter weg.
• Der Wert 0 bewirkt keine Verschiebung entlang der z-Achse.

Positive und negative z-Werte vergleichen

Alle folgenden Boxen befinden sich in einem Bereich mit derselben Perspektive. Nur die Verschiebung entlang der z-Achse unterscheidet sich.

.translate-z-negative {
  transform: translateZ(-120px);
}
        

.translate-z-zero {
  transform: translateZ(0);
}
        

.translate-z-positive {
  transform: translateZ(120px);
}
        

Verschiebung entlang aller drei Achsen

Mit translate3d() können die Verschiebungen entlang der x-, y- und z-Achse gemeinsam angegeben werden.

transform: translate3d(x, y, z);
    

.element {
  transform: translate3d(40px, 20px, 80px);
}
    

Das Element wird dabei:

• 40px nach rechts verschoben,
• 20px nach unten verschoben und
• 80px zum Betrachter bewegt.

translate3d() in der praktischen Darstellung

.translate3d-positive {
  transform: translate3d(35px, 25px, 80px);
}
        

.translate3d-negative {
  transform: translate3d(-35px, -25px, -80px);
}
        

Warum translateZ() ohne Perspektive kaum sichtbar ist

Eine reine Verschiebung entlang der z-Achse verändert zunächst weder die waagrechte noch die senkrechte Position des Elements. Ohne Perspektive fehlt daher der sichtbare Größen- und Tiefeneindruck.

.ohne-perspektive {
  /* keine perspective-Eigenschaft */
}

.mit-perspektive {
  perspective: 600px;
}
    

Der Platz im Dokumentfluss bleibt unverändert

Wie bei 2D-Transformationen verändert eine 3D-Verschiebung normalerweise nicht den ursprünglichen Platz des Elements im Dokumentfluss. Andere Elemente werden durch die optische Verschiebung nicht automatisch zur Seite geschoben.

Drehungen im dreidimensionalen Raum

Mit rotateX(), rotateY() und rotateZ() wird ein Element um eine bestimmte Achse gedreht. Der Drehwinkel wird meistens in Grad mit der Einheit deg angegeben.

.element-x {
  transform: rotateX(45deg);
}

.element-y {
  transform: rotateY(45deg);
}

.element-z {
  transform: rotateZ(45deg);
}
    

Die drei Drehachsen vergleichen

Alle Boxen werden um 55deg gedreht. Nur die verwendete Achse unterscheidet sich.

.rotate-x-example {
  transform: rotateX(55deg);
}
        

.rotate-y-example {
  transform: rotateY(55deg);
}
        

.rotate-z-example {
  transform: rotateZ(55deg);
}
        

Positive und negative Drehwinkel

Das Vorzeichen des Winkels bestimmt die Drehrichtung. Die genaue räumliche Wirkung hängt von der verwendeten Achse und vom Betrachtungspunkt ab.

.rotate-y-positive {
  transform: rotateY(45deg);
}
        

.rotate-y-negative {
  transform: rotateY(-45deg);
}
        

Die Drehachse mit transform-origin verschieben

Standardmäßig dreht sich ein Element um seinen Mittelpunkt. Mit transform-origin kann der Drehpunkt beispielsweise an eine Kante verschoben werden.

.rotate-center-origin {
  transform-origin: center center;
  transform: rotateY(55deg);
}
        

.rotate-left-origin {
  transform-origin: left center;
  transform: rotateY(55deg);
}
        

Drehungen um mehrere Achsen kombinieren

Mehrere Drehfunktionen können innerhalb von transform hintereinander angegeben werden.

.rotate-combined {
  transform:
    rotateX(30deg)
    rotateY(45deg);
}
    

Auch bei 3D-Drehungen beeinflusst die Reihenfolge der Funktionen das Ergebnis:

.element-a {
  transform: rotateX(30deg) rotateY(45deg);
}

.element-b {
  transform: rotateY(45deg) rotateX(30deg);
}
    

Besondere Drehwinkel