transform 3D

Zuletzt aktualisiert am 15. Februar 2026

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.

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

perspective

perspective-origin

transform-style

backface-visibility

3D-Transformationsfunktionen

Beispiele

Perspective-Vergleich

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

.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>

Card-Flip

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

.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>

3D-Button

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

.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>

Verschachtelte 3D-Kontexte

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

/* 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>

3D-Würfel

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

.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

• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften