Transform/3D-Transforms
- 30min
- mittel
- Kenntnisse in
• CSS
• CSS-Transforms
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.
Inhaltsverzeichnis
Tiefenwirkung
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).
.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:
- zuerst wird es um 45° gedreht
- 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.
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.
.stage {
perspective: 600px;
perspective-origin: var(--origin);
--origin: center center;
}
.panel {
width: 100%;
height: 100%;
transform: perspective(600px) rotateY(45deg);
}
Mit den Schiebereglern können die Werte für perspective-origin verändert werden.
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.
.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.
Folgende Angaben sind möglich:
visible: (Standardwert) die Vorderseite scheint gespiegelt durchhidden: die Rückseite wird weiß und die Vorderseite ist so nicht sichtbar
.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-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);
}
<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
- smashingmagazine: Let’s Play With Hardware-Accelerated CSS
- teamtreehouse.org: Increase Your Site’s Performance with Hardware-Accelerated CSS
- David Walsh: Force Hardware Acceleration in WebKit with translate3d
