css mit Adi Prinz

Aufbau der 3D-Karte

Die 3D-Karte besteht aus einem Perspektivbereich, einem drehbaren Kartencontainer und zwei übereinanderliegenden Kartenseiten.

.card-scene {
  perspective: 1000px;
}

.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

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

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

HTML-Struktur der Karte

Der Button und die Karte werden gemeinsam in einem Demo-Bereich angeordnet. Die beiden Kartenseiten liegen innerhalb desselben 3D-Containers.

<div class="card-scene">
  <div class="card-3d">
    <div class="card-side card-front">
      Vorderseite
    </div>

    <div class="card-side card-back">
      Rückseite
    </div>
  </div>
</div>

<button type="button" class="card-flip-button">
  Karte drehen
</button>
    

Vollständige interaktive 3D-Karte

Betätige die Schaltfläche, um die Karte zwischen Vorder- und Rückseite zu drehen.

Vorder- und Rückseite übereinanderlegen

Beide Kartenseiten werden absolut innerhalb des gemeinsamen Kartencontainers positioniert.

.card-3d {
  position: relative;
  width: 320px;
  height: 400px;
}

.card-side {
  position: absolute;
  inset: 0;
}
    

Durch inset: 0 erhalten alle vier Seitenabstände den Wert 0. Beide Kartenseiten füllen dadurch denselben Bereich aus.

Die Rückseite vorbereiten

In der Ausgangslage zeigt die Vorderseite zum Betrachter. Die Rückseite wird um 180deg gedreht.

.card-front {
  transform: rotateY(0);
}

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

Die Rückflächen ausblenden

Ohne backface-visibility: hidden könnte die jeweils abgewandte Kartenseite spiegelverkehrt durch die andere Seite hindurch sichtbar werden.

.card-side {
  backface-visibility: hidden;
}
    

Den gesamten Kartencontainer drehen

Beim Drehen wird nicht nur eine einzelne Kartenseite, sondern der gemeinsame 3D-Container transformiert.

.card-3d.is-flipped {
  transform: rotateY(180deg);
}
    

Die vorbereitete Rückseite dreht sich dadurch zum Betrachter, während sich die Vorderseite abwendet.

Die Drehung animieren

Mit transition wechselt die Karte nicht plötzlich, sondern dreht sich gleichmäßig.

.card-3d {
  transition: transform 0.8s ease-in-out;
}
    

Die Klasse mit JavaScript umschalten

Bei jedem Klick auf den Button wird die Klasse is-flipped hinzugefügt oder entfernt.

const flipButton =
  document.querySelector(".card-flip-button");

const interactiveCard =
  document.getElementById("interactiveCard");

flipButton.addEventListener("click", () => {
  interactiveCard.classList.toggle("is-flipped");
});
    

classList.toggle() gibt außerdem zurück, ob die Klasse nach dem Umschalten vorhanden ist. Diesen Wert verwenden wir für die ARIA-Angaben.

Schaltfläche und Status aktualisieren

Nach dem Drehen werden der Text der Schaltfläche, aria-pressed und die versteckte Statusmeldung angepasst.

const isFlipped =
  interactiveCard.classList.toggle("is-flipped");

flipButton.setAttribute(
  "aria-pressed",
  String(isFlipped)
);

flipButton.textContent = isFlipped
  ? "Vorderseite anzeigen"
  : "Rückseite anzeigen";
    

Reduzierte Bewegung berücksichtigen

Hat ein Benutzer reduzierte Bewegung eingestellt, wird die lange Drehbewegung entfernt.

@media (prefers-reduced-motion: reduce) {
  .card-3d {
    transition: none;
  }
}
    

Grundprinzip der 3D-Darstellung

CSS-3D-Transformationen erweitern die zweidimensionale Darstellung um eine zusätzliche räumliche Achse. Neben der x- und y-Achse steht deshalb auch die z-Achse zur Verfügung.

Die wichtigsten CSS-Eigenschaften

3D-Transformationsfunktionen

Perspektive richtig einsetzen

Die Eigenschaft perspective wird meistens auf dem übergeordneten Szenenbereich festgelegt.

.scene {
  perspective: 1000px;
}

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

perspective und perspective()

Die CSS-Eigenschaft und die Transformationsfunktion besitzen eine ähnliche Aufgabe, werden aber an unterschiedlichen Stellen eingesetzt.

.scene {
  perspective: 1000px;
}

.element {
  transform:
    perspective(1000px)
    rotateY(45deg);
}
    

Räumliche Unterelemente erhalten

Standardmäßig werden untergeordnete Elemente in die Ebene ihres übergeordneten Elements projiziert. Mit transform-style: preserve-3d behalten sie ihre räumlichen Positionen.

.object-3d {
  position: relative;
  transform-style: preserve-3d;
}

.object-part {
  position: absolute;
  transform: translateZ(100px);
}
    

Die Reihenfolge der Transformationen

Mehrere Transformationsfunktionen werden nicht unabhängig voneinander ausgeführt. Ihre Reihenfolge verändert das Ergebnis.

transform:
  rotateY(60deg)
  translateZ(300px);
        

transform:
  translateZ(300px)
  rotateY(60deg);
        

Vorderseiten und Rückseiten

Bei gedrehten Karten und Flächen kann die Rückseite des Elements sichtbar werden. Mit backface-visibility wird ihre Darstellung gesteuert.

.card-side {
  backface-visibility: hidden;
}

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

3D-Transformationen animieren

Transformationen lassen sich mit transition oder @keyframes animieren.

.card {
  transition:
    transform 0.8s ease-in-out;
}

.card.is-flipped {
  transform: rotateY(180deg);
}
        

.object {
  animation:
    rotate-object 10s linear infinite;
}

@keyframes rotate-object {
  to {
    transform: rotateY(360deg);
  }
}
        

Animationen barrierearm gestalten

Starke und dauerhafte 3D-Bewegungen können für manche Menschen unangenehm sein. Die Benutzereinstellung für reduzierte Bewegung sollte deshalb berücksichtigt werden.

@media (prefers-reduced-motion: reduce) {
  .animated-object {
    animation: none;
    transition: none;
  }
}
    

• Daueranimationen sollten angehalten oder deaktiviert werden.
• Die Funktion eines Elements muss auch ohne Animation erhalten bleiben.
• Interaktive Animationen sollten mit Maus und Tastatur bedienbar sein.
• Ein sichtbarer Tastaturfokus darf nicht entfernt werden.

Typischer Aufbau eines 3D-Elements

Viele CSS-3D-Beispiele verwenden denselben dreiteiligen Grundaufbau.

<div class="scene">
  <div class="object-3d">
    <div class="object-part">
      Inhalt
    </div>
  </div>
</div>
    

.scene {
  perspective: 1000px;
}

.object-3d {
  position: relative;
  transform-style: preserve-3d;
}

.object-part {
  position: absolute;
  backface-visibility: hidden;
}
    

Checkliste für eigene 3D-Beispiele

• Besitzt der äußere Szenenbereich eine passende perspective?
• Verwendet der gemeinsame Objektcontainer transform-style: preserve-3d?
• Sind die einzelnen Flächen korrekt positioniert und transformiert?
• Wurde die Reihenfolge mehrerer Transformationsfunktionen geprüft?
• Soll die Rückseite mit backface-visibility: hidden ausgeblendet werden?
• Funktioniert die Darstellung auch auf kleinen Bildschirmen?
• Sind interaktive Elemente mit der Tastatur bedienbar?
• Wird prefers-reduced-motion berücksichtigt?
• Bleiben wichtige Inhalte auch ohne 3D-Effekt verständlich?

Fazit

Mit CSS-3D-Transformationen können Elemente räumlich verschoben, gedreht und animiert werden. Die wichtigsten Grundlagen bilden perspective, transform-style: preserve-3d, die Transformationsfunktionen und backface-visibility.

Auf dieser Seite wurden diese Techniken schrittweise erklärt und unter anderem auf Karten, einen Würfel, eine Bildergalerie und eine interaktive 3D-Karte angewendet.