Transform/3D-Transforms

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Webseiten sind wie Printprodukte zweidimensional. Trotzdem kann es Design und Benutzerführung verbessern, wenn man den Eindruck räumlicher Tiefe vermittelt. Benutzer erkennen z. B. Buttons eher, wenn sie Knöpfen und Schaltern aus dem wirklichen Leben ähneln.

Neben einem Schattenwurf mit box-shadow können dreidimensionale Objekte mit 3D-Transforms gezeichnet werden. Die dafür nötigen 3D-Funktionen wurden bereits in den letzten Kapiteln vorgestellt – sie werden durch eine perspektivische Ansicht und weitere Eigenschaften zur Gestaltung erweitert.

Auch wenn sich SVG zum Zeichnen von Grafikobjekten anbietet, ist das SVG-Element selbst nur eine zweidimensionale Zeichenfläche. Elemente einer Webseite können dagegen frei in alle drei Richtungen positioniert werden und erhalten durch das Hinzufügen einer Perpektive räumliche Tiefenwirkung.


Tiefenwirkung

dreidimensionales Koordniatensystem

Wie Sie aus den vergangenen Kapiteln gesehen haben, bewirkt die Rotation eines Vierecks eigentlich nur die Verformung zu einem Trapez. Erst der Vergleich mit anderen Grafikobjekten aus einem weiter entfernten Blickwinkel lässt eine dreidimensionale Wirkung zu.

perspective

Dies erreicht man entweder mit der perspective()-Funktion oder mit der entsprechenden perspective-Eigenschaft. Sie bestimmen die Entfernung zwischen der Z-Ebene und dem Betrachter, um 3D-Objekten räumliche Tiefe zu geben.

3D-Objekte mit z>0 werden größer, Objekte mit z<0 kleiner. 3D-Objekte, deren z-Achsenwert größer ist als der Wert von perspective, befinden sich hinter dem Betrachter und werden deshalb nicht angezeigt. Durch die Angabe eines anderen Werts als 0 und none erzeugen Sie einen neuen Stapelkontext (stacking context).


Perspektive mit 3D-Transforms ansehen …
.red {
  background: #c82f04;
  transform: perspective(600px) rotateY(45deg);
}

.scene2 {
  perspective: 400px;
}

.yellow {
  background: #dfac20;
  animation: rotation 5s infinite alternate;
}
 
@keyframes rotation {
	0 {
		rotate: Y 0;
	}
	100% {
		rotate: Y -89deg;
	}
}

Das linke rote Quadrat wird mit 2 Funktionen innerhalb der transform-Eigenschaft transformiert:

  1. zuerst wird es um 45° gedreht
  2. dann erhält das rote Quadrat mit der perspective(600px)-Funktion eine räumliche Tiefe.

Das rechte gelbe Quadrat wird mit der „neuen“ rotate-Eigenschaft gedreht. Während der erste Wert die Y-Achse angibt, wird der zweite Wert in einer Animation von 0 auf -89° und wieder zurück gedreht.

Beachten Sie, dass die perspective-Eigenschaft hier für das Elternelement festgelegt wird. Sie hat keinen Einfluss auf die Darstellung des Elements, sie liefert nur eine räumliche Dimension für Kindelemente.

perspective-origin

Die perspective-origin-Eigenschaft legt die Position des Betrachters eines transformierten Elements fest. Wie bei perspective muss sie für das Elternelement deklariert werden:

Standardwert ist die Mitte des Elements, kann aber durch Schlüsselwörter wie left, right, top … oder Längenangaben verändert werden.

Anstelle des CSS-Würfels aus dem letzten Kapitel wollen wir nun ein Möbelstück aus unserem HTML-Einstieg von allen Seiten betrachten:

Blickwinkel verändern mit 3D-Transforms ansehen …
bla

Zuerst verschieben wir die SVGs aus dem Mittelpunkt heraus an die passende Stelle.

  1. Die Front wird mit translate etwas nach vorne geholt
  2. Die Seiten werden um 90° gedreht und dann jeweils nach links, bzw. rechts verschoben

Ein JavaScript lauscht auf die drei Schieberegler, mit denen der Nutzer perspective und perspective-origin verändern kann.

transform-style

Im Elementfluss werden alle Elemente untereinander dargestellt. Mit CSS können Sie Elemente übereinander legen, auch bei Transformationen ergibt sich so ein neuer Stapelkontext.

Mit der Eigenschaft transform-style können Sie festlegen, wie die Ansicht der Kind-Elemente in 3D dargestellt wird.

Browserunterstützung
caniuse.com
durch Raum und Zeit in die 3. Dimension ansehen …
.scene {
  perspective: 600px;	
  transform-style: preserve-3d;
}
#arrow {
  translate: 0 -90px;
  rotate: 1 1 1 -45deg;
}

Das gelbe Panel wird vom roten Pfeil durchstoßen. Dieser beginnt unterhalb des gelben Panels, wird von diesem dann verdeckt, da der Pfeil einen niedrigeren Z-Wert hat. Sobald der Z-Wert des Pfeils größer als der des Panels wird, wird der Pfeil vor dem Panel sichtbar.

backface-visibility

Mit der Eigenschaft backface-visibility können Sie festlegen, wie die Rückseite eines transformierten Elements dargestellt wird, wenn dies z. B. 180° um die Y-Achse rotiert würde. Normalerweise würde die Vorderseite gespiegelt durchscheinen.

Browserunterstützung
caniuse.com

Folgende Angaben sind möglich:

  • visible: (Standardwert) die Vorderseite scheint gespiegelt durch
  • hidden: die Rückseite wird weiß und die Vorderseite ist so nicht sichtbar


Beispiel ansehen …
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: inset 0 0 30px rgb(125 125 125 / 0.8);
  text-align: center;
  line-height: 200px;
  font-size: 1.5em;
  backface-visibility: visible;
}

.cube:hover div {
    backface-visibility: hidden;
}

Der CSS-Würfel hat durchscheinende Seiten.

Bei :hover werden die Rückseiten weiß und Sie sehen nur die Ihnen zugewandten Seiten.


Eine Anwendungsmöglichkeit bietet sich z. B. bei Kartenspielen, bei denen Spielkarten aus 2 Rücken an Rücken liegenden Elementen bestehen. Bei einer Animation wie Austeilen oder Weitergeben sollen Wert und Farbe der Karte nicht zufällig sichtbar werden.

Anwendungsbeispiele

Flip-Cards

2020 feierte SELFHTML sein 25-jähriges Jubiläum. Aus diesem Anlass sollten die interessantesten Ereignisse präsentiert werden. Hier finden sich Flip-Cards mit den diversen SELF-Logos, die beim :hovern die Rückseite anzeigen:

Flip-Cards 25 Jahre SELFHTML ansehen …
.flip-card {
  width: 250px;
  height: 300px;
  perspective: 500px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
bla
<div id="1" class="flip-card">
  <div class="flip-card-inner">
    <div class=" classic flip-card-front">
    	<h2>1995</h2>    
      <img src="https://wiki.selfhtml.org/images/8/87/Selfhtml-logo.gif" alt="SELF-Logo-vintage" >
    </div>
    <div class="flip-card-back">
      <h2>est. 1995</h2> 
      <p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt">Wie alles begann – Stefan Münz erzählt</a></p> 
        <p>In einer Kneipe namens Forum hört Stefan Münz von <b>Word Wibe Web</b> und <b>HTML</b>.</p>
        <p>Da es keine Doku dazu gibt, schreibt er halt eine!</p>
    </div>
  </div>
</div>


Weblinks


Abgerufen von „http://wiki.selfhtml.org/index.php?title=Transform/3D-Transforms&oldid=92840“