css mit Adi Prinz

Die Eigenschaft transform-style

Die Eigenschaft transform-style bestimmt, ob die Kindelemente eines transformierten Elements gemeinsam in einem dreidimensionalen Raum dargestellt oder auf die Fläche ihres Elternelements reduziert werden.

.element {
  transform-style: flat;
}

.element {
  transform-style: preserve-3d;
}
    

Perspektive, 3D-Container und Kindelemente

Ein typischer Aufbau für verschachtelte 3D-Elemente besteht aus drei Ebenen:

1. Ein äußerer Bereich stellt mit perspective den Betrachtungsabstand bereit.
2. Ein innerer 3D-Container erhält transform-style: preserve-3d.
3. Seine Kindelemente werden mit Funktionen wie translateZ() oder rotateY() räumlich angeordnet.

.scene {
  perspective: 600px;
}

.object {
  transform-style: preserve-3d;
  transform: rotateY(35deg);
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: translateZ(-50px);
}
    

flat und preserve-3d vergleichen

Beide Beispiele enthalten gleich angeordnete Kindelemente. Der einzige Unterschied liegt im Wert von transform-style.

.transform-style-flat {
  transform-style: flat;
  transform:
    rotateX(-18deg)
    rotateY(35deg);
}
        

.transform-style-preserve {
  transform-style: preserve-3d;
  transform:
    rotateX(-18deg)
    rotateY(35deg);
}
        

transform-style wirkt auf die Kindelemente

Die Eigenschaft legt nicht fest, ob das Element selbst dreidimensional transformiert werden darf. Sie bestimmt, wie dessen Kindelemente dargestellt werden.

.parent {
  transform-style: preserve-3d;
}

.child-a {
  transform: translateZ(60px);
}

.child-b {
  transform: translateZ(-60px);
}
    

Erst die räumlichen Transformationen der Kindelemente erzeugen die unterschiedlichen Positionen. preserve-3d sorgt dafür, dass diese Positionen beim Darstellen des Elternelements erhalten bleiben.

Mehrere verschachtelte 3D-Container

Bei tiefer verschachtelten 3D-Strukturen muss transform-style: preserve-3d auf jeder Ebene gesetzt werden, deren Kindelemente räumlich dargestellt werden sollen.

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

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

.object-part-child {
  transform: translateZ(40px);
}
    

Wird eine Zwischenebene mit flat dargestellt, werden ihre Nachkommen an dieser Stelle abgeflacht.

.level-1 {
  transform-style: preserve-3d;
}

.level-2 {
  transform-style: flat;
}
        

.level-1 {
  transform-style: preserve-3d;
}

.level-2 {
  transform-style: preserve-3d;
}
        

Zusammenspiel mit perspective

Die Perspektive wird üblicherweise auf dem äußeren Szenenbereich festgelegt. Der darin liegende 3D-Container erhält transform-style: preserve-3d.

.scene {
  perspective: 700px;
}

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

Den gesamten 3D-Container bewegen

Sind die Kindelemente mit preserve-3d räumlich angeordnet, kann der gesamte Container gedreht oder animiert werden. Die Kindelemente bewegen sich dabei als zusammengehöriges 3D-Objekt.

.object {
  transform-style: preserve-3d;
  animation: rotate-object 6s linear infinite;
}

@keyframes rotate-object {
  from {
    transform:
      rotateX(-18deg)
      rotateY(0);
  }

  to {
    transform:
      rotateX(-18deg)
      rotateY(360deg);
  }
}
    

Eigenschaften, die eine flache Darstellung erzwingen können

Bestimmte CSS-Eigenschaften können dazu führen, dass ein Element trotz angegebenem transform-style: preserve-3d tatsächlich flach dargestellt wird.

Das kann unter anderem bei folgenden Eigenschaften auftreten:

• overflow mit einem Wert wie hidden,
• opacity mit einem Wert kleiner als 1,
• filter mit einem anderen Wert als none,
• clip-path mit einem anderen Wert als none,
• mask-image mit einem anderen Wert als none.

Die Eigenschaft backface-visibility

Die Eigenschaft backface-visibility bestimmt, ob die Rückseite eines gedrehten Elements sichtbar ist, wenn sie zum Betrachter zeigt.

.element {
  backface-visibility: visible;
}

.element {
  backface-visibility: hidden;
}
    

Wann wird die Rückseite sichtbar?

Eine normale Vorderseite zeigt zunächst zum Betrachter. Bei einer Drehung um 180deg zeigt ihre Rückseite nach vorne.

.backface-rotate-0 {
  transform: rotateY(0);
}
        

.backface-rotate-90 {
  transform: rotateY(90deg);
}
        

.backface-rotate-180 {
  transform: rotateY(180deg);
}
        

visible und hidden vergleichen

Beide Elemente sind um 180deg gedreht. Der einzige Unterschied liegt im Wert von backface-visibility.

.backface-visible {
  backface-visibility: visible;
  transform: rotateY(180deg);
}
        

.backface-hidden {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
        

Eine Karte mit Vorder- und Rückseite aufbauen

Eine klassische Wendekarte besteht aus einem äußeren Perspektivbereich, einem drehbaren Kartencontainer sowie zwei übereinanderliegenden Kartenseiten.

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      Vorderseite
    </div>

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

1. .flip-card stellt die Perspektive bereit.
2. .flip-card-inner enthält beide Seiten und wird gedreht.
3. Vorder- und Rückseite liegen mit position: absolute deckungsgleich übereinander.
4. Beide Seiten erhalten backface-visibility: hidden.
5. Die Rückseite wird bereits in ihrer Ausgangslage um 180deg gedreht.

Drehbare Vorder- und Rückseite

Bewege den Mauszeiger über die Karte oder setze mit der Tastatur den Fokus auf die Karte.

.flip-card {
  perspective: 800px;
}

.flip-card-inner {
  position: relative;
  width: 240px;
  height: 160px;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

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

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

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

Was geschieht während der Drehung?

Die Eigenschaft muss auf den Kartenseiten liegen

backface-visibility wird auf jene Elemente gesetzt, deren Rückseiten verborgen werden sollen – in diesem Fall auf Vorder- und Rückseite der Karte.

.flip-card-face {
  backface-visibility: hidden;
}
    

Darstellung in verschiedenen Browsern

Moderne Browser unterstützen backface-visibility. Bei komplexen 3D-Animationen können dennoch kleine Darstellungsunterschiede auftreten, beispielsweise flackernde Kanten oder kurz sichtbare Rückseiten.

.flip-card-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
    

Bedienung und Barrierefreiheit

Ein reiner Hover-Effekt funktioniert nicht für alle Eingabemethoden. Das Beispiel verwendet deshalb zusätzlich :focus, damit die Karte auch mit der Tastatur gedreht werden kann.

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

• Mit tabindex="0" kann die Karte den Tastaturfokus erhalten.
• Ein sichtbarer Fokusrahmen zeigt an, welches Element aktiv ist.
• Wichtige Informationen sollten nicht ausschließlich durch Hover erreichbar sein.
• Bei reduzierter Bewegung kann die Dreh-Transition deaktiviert werden.