transform 3D

3D-Transformationen erweitern die 2D-Welt um eine Tiefenachse (Z-Achse). Mit perspective erzeugst du eine räumliche Tiefenwirkung, sodass nähere Elemente größer und entferntere kleiner erscheinen. Funktionen wie rotateX(), rotateY() und translateZ() bewegen Elemente im dreidimensionalen Raum. transform-style: preserve-3d sorgt dafür, dass Kind-Elemente ihre eigene 3D-Position behalten statt flachgedrückt zu werden. backface-visibility bestimmt, ob die Rückseite eines gedrehten Elements sichtbar ist, unverzichtbar für Card-Flip-Effekte.

Steckbrief transform 3D

Syntax: perspective: <länge> | none
Initialwert: none
Vererbt: Nein
Animierbar: Ja

Kategorie: Transformationen
Werte: 16
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

Für 3D-Effekte brauchst du perspective auf dem Container. Ohne Perspektive sehen Rotationen um die X- oder Y-Achse nur wie eine Stauchung aus, weil der Browser keine Tiefenberechnung durchführt. Die Perspektive definiert den Abstand des Betrachters zur Z=0 Ebene: kleine Werte (300 bis 500px) erzeugen einen dramatischen Fluchtpunkt-Effekt, große Werte (800 bis 1200px) wirken subtiler und natürlicher.

transform-style: preserve-3d auf einem Container bewahrt die 3D-Positionierung der Kinder. Ohne diesen Wert werden Kind-Elemente auf die 2D-Ebene des Eltern-Elements projiziert: sie verlieren ihre Tiefe. Das ist entscheidend, wenn du verschachtelte 3D-Szenen baust oder einen Card-Flip mit Vorder- und Rückseite erstellen willst.

backface-visibility: hidden versteckt die Rückseite eines Elements, wenn es um mehr als 90° gedreht ist. Standardmäßig ist die Rückseite sichtbar (als gespiegeltes Bild). Für Card-Flips legst du zwei Elemente übereinander, drehst die Rückseite um 180° und versteckst die jeweilige Rückseite, beim Drehen wird so immer nur eine Seite sichtbar.

Syntax & Werte

16 Werte

perspective

Wert	Beschreibung	Beispiel
`none`	Keine Perspektive. 3D-Rotationen werden flach dargestellt. (Standard)	perspective: none;
`<länge>`	Abstand des Betrachters. Kleinere Werte = stärkerer 3D-Effekt.	perspective: 800px;

perspective-origin

Wert	Beschreibung	Beispiel
`50% 50%`	Fluchtpunkt in der Mitte des Containers. (Standard)	perspective-origin: 50% 50%;
`<x> <y>`	Position des Fluchtpunkts. Schlüsselwörter (top, left, center) oder Längen/Prozente.	perspective-origin: left top;

transform-style

Wert	Beschreibung	Beispiel
`flat`	Kind-Elemente werden auf die Ebene des Eltern-Elements projiziert. (Standard)	transform-style: flat;
`preserve-3d`	Kind-Elemente behalten ihre eigene 3D-Position im Raum.	transform-style: preserve-3d;

backface-visibility

Wert	Beschreibung	Beispiel
`visible`	Rückseite ist sichtbar (gespiegelt). (Standard)	backface-visibility: visible;
`hidden`	Rückseite wird ausgeblendet, wenn das Element um mehr als 90° gedreht ist.	backface-visibility: hidden;

3D-Transformationsfunktionen

Wert	Beschreibung	Beispiel
`rotateX(winkel)`	Dreht um die horizontale Achse. Positive Werte kippen die Oberkante nach hinten.	transform: rotateX(45deg);
`rotateY(winkel)`	Dreht um die vertikale Achse. Positive Werte kippen die rechte Seite nach hinten.	transform: rotateY(45deg);
`rotateZ(winkel)`	Dreht um die Z-Achse (identisch mit rotate()).	transform: rotateZ(45deg);
`rotate3d(x, y, z, winkel)`	Dreht um eine beliebige Achse, definiert durch den Vektor (x, y, z).	transform: rotate3d(1, 1, 0, 45deg);
`translateZ(z)`	Verschiebt entlang der Z-Achse. Positive Werte kommen näher zum Betrachter.	transform: translateZ(50px);
`translate3d(x, y, z)`	Verschiebt in alle drei Dimensionen gleichzeitig.	transform: translate3d(10px, 20px, 50px);
`scaleZ(faktor)`	Skaliert entlang der Z-Achse. Nur sichtbar in Kombination mit 3D-Rotationen.	transform: scaleZ(2);
`scale3d(x, y, z)`	Skaliert in alle drei Dimensionen.	transform: scale3d(1, 1, 2);

Beispiele

5 Beispiele

Die Perspektive bestimmt die Stärke des 3D-Effekts. Kleine Werte erzeugen dramatische Verzerrungen, große Werte wirken subtiler.

Perspective-Vergleich (alle rotateY 40deg)

.container-1 { perspective: 300px; }  /* Dramatisch */
.container-2 { perspective: 600px; }  /* Mittel */
.container-3 { perspective: 1200px; } /* Subtil */

.box {
  transform: rotateY(40deg);
}

<div class="persp-demo">
<div class="persp-wrap">
  <div class="persp-container p-300">
    <div class="persp-box">300px</div>
  </div>
  <div class="persp-label">Stark</div>
</div>
<div class="persp-wrap">
  <div class="persp-container p-600">
    <div class="persp-box">600px</div>
  </div>
  <div class="persp-label">Mittel</div>
</div>
<div class="persp-wrap">
  <div class="persp-container p-1200">
    <div class="persp-box">1200px</div>
  </div>
  <div class="persp-label">Subtil</div>
</div>
</div>

Der klassische Card-Flip-Effekt: Vorder- und Rückseite liegen übereinander, backface-visibility: hidden zeigt beim Drehen immer nur die aktive Seite.

Card-Flip (Hover)

.flip-card {
  perspective: 600px;
}

.flip-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
}

<div class="flip-demo">
<div class="flip-card">
  <div class="flip-inner">
    <div class="flip-front">Vorderseite</div>
    <div class="flip-back">Rückseite ✓</div>
  </div>
</div>
</div>

Ein Button, der sich beim Hover nach vorne neigt. translateZ in Kombination mit perspective erzeugt den Eindruck, dass der Button auf dich zukommt.

3D-Button mit perspective

.container {
  perspective: 500px;
}

.btn3d {
  transition: transform 0.3s ease;
}

.btn3d:hover {
  transform: rotateX(-8deg) translateZ(10px);
}

.btn3d:active {
  transform: rotateX(2deg) translateZ(-5px);
}

<div class="btn3d-demo">
<button class="btn3d">3D Button</button>
<button class="btn3d">Hover mich</button>
</div>

Mit transform-style: preserve-3d behalten Kind-Elemente ihre 3D-Position. Ohne diesen Wert werden sie flachgedrückt.

preserve-3d vs flat

/* Kind-Elemente behalten 3D-Position */
.group-3d {
  transform-style: preserve-3d;
  transform: rotateY(25deg);
}

/* Kind-Elemente werden flachgedrückt */
.group-flat {
  transform-style: flat;
  transform: rotateY(25deg);
}

.child-front {
  transform: translateZ(30px);
}

<div class="nested-demo">
<div class="nested-wrap">
  <div class="nested-parent">
    <div class="nested-group">
      <div class="nested-child">Back</div>
      <div class="nested-child">Front</div>
    </div>
  </div>
  <div class="nested-label">preserve-3d</div>
</div>
<div class="nested-wrap">
  <div class="nested-parent">
    <div class="nested-group flat">
      <div class="nested-child">Back</div>
      <div class="nested-child">Front</div>
    </div>
  </div>
  <div class="nested-label">flat</div>
</div>
</div>

Ein drehender Würfel aus sechs Seiten, die mit 3D-Transformationen im Raum positioniert werden.

3D-Würfel

.container {
  perspective: 600px;
}

.cube {
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  animation: cube-spin 6s linear infinite;
}

.face-front  { transform: translateZ(40px); }
.face-back   { transform: rotateY(180deg) translateZ(40px); }
.face-right  { transform: rotateY(90deg) translateZ(40px); }
.face-left   { transform: rotateY(-90deg) translateZ(40px); }
.face-top    { transform: rotateX(90deg) translateZ(40px); }
.face-bottom { transform: rotateX(-90deg) translateZ(40px); }

@keyframes cube-spin {
  to { transform: rotateX(-20deg) rotateY(360deg); }
}

<div class="cube-demo">
<div class="cube">
  <div class="cube-face">Front</div>
  <div class="cube-face">Back</div>
  <div class="cube-face">Right</div>
  <div class="cube-face">Left</div>
  <div class="cube-face">Top</div>
  <div class="cube-face">Bottom</div>
</div>
</div>

Barrierefreiheit

3D-Transformationen können bei Nutzern mit vestibulären Störungen Schwindel und Übelkeit auslösen, besonders rotierende Animationen und Parallax-Effekte mit Perspektive. Respektiere prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .cube {
    animation: none;
  }
  .flip-inner {
    transition: none;
  }
}

Card-Flip-Effekte können problematisch sein, wenn wichtige Informationen nur auf der Rückseite stehen. Screenreader lesen beide Seiten vor, aber der Nutzer weiß nicht, dass visuell nur eine Seite sichtbar ist. Stelle sicher, dass alle relevanten Inhalte auch ohne Interaktion zugänglich sind, zum Beispiel mit aria-label oder indem die Rückseiten-Informationen im DOM an der richtigen Stelle stehen.

Elemente, die sich durch translateZ dem Nutzer nähern, sollten nicht zu nah kommen: extreme Perspektiv-Effekte können desorientierend wirken und die Lesbarkeit verschlechtern.

Häufige Fehler

5 Punkte

perspective direkt auf dem transformierten Element setzen statt auf dem Container. perspective gehört auf das Eltern-Element, das die 3D-Szene enthält. Alternativ kannst du perspective() als Transformationsfunktion verwenden: transform: perspective(600px) rotateY(45deg), aber dann gilt die Perspektive individuell pro Element.
transform-style: preserve-3d vergessen. Ohne diesen Wert werden Kind-Elemente auf die 2D-Ebene des Eltern-Elements projiziert und translateZ hat keinen sichtbaren Effekt.
overflow: hidden auf einem preserve-3d-Container setzen. overflow: hidden erzwingt transform-style: flat in den meisten Browsern und zerstört den 3D-Kontext.
backface-visibility: hidden nur auf einer Seite der Flip-Card setzen. Beide Seiten (Vorder- und Rückseite) brauchen backface-visibility: hidden, sonst scheint eine Seite durch.
Zu kleine perspective-Werte (unter 200px) verwenden. Das erzeugt extreme Verzerrungen, die die Lesbarkeit stark beeinträchtigen.

Browser-Kompatibilität

5 von 5

3D-Transformationen, perspective und backface-visibility werden von allen modernen Browsern vollständig unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

3D-Transformationen funktionieren in HTML-Emails praktisch nicht. Selbst Apple Mail hat Einschränkungen bei preserve-3d.

Apple Mail

Teilweise

Grundlegende 3D-Transforms, aber preserve-3d unzuverlässig
Gmail

Keine

Alle transform-Properties werden entfernt
Outlook

Keine

Kein Support für CSS-Transformationen
Thunderbird

Teilweise

Grundlegende Unterstützung
Yahoo Mail

Keine

transform wird ignoriert

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da