Transform/3D-Transforms
Text-Info
- 30min
- mittel
- Knntnisse 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.
Inhaltsverzeichnis
perspective[Bearbeiten]
Mit der Eigenschaft perspective können Sie eine perspektivische Ansicht für eine 3D-Transformation festlegen. Mittels perspective-origin kann der Ausgangspunkt festgelegt werden.
Zusätzlich gibt es unter den Transformationen-Funktionen eine gleichnamige perspective()-Funktion.
perspective Eigenschaft[Bearbeiten]
Die perspective-Eigenschaft bestimmt die Entfernung zwischen der Z-Ebene und dem Betrachter um 3d-Objekten räumliche Tiefe zu geben.
Folgende Angaben sind möglich:
-
none: keine (Standardwert) -
Länge: eine Längenangabe
.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 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
dass die perspective-Eigenschaft keinen Einfluss auf die Darstellung des Elements hat, sie liefert nur eine räumliche Dimension für Kindelemente.
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.
Der Standardwert für den Fluchtpunkt ist die Mitte des Elements, kann aber durch die perspective-origin-Eigenschaft verändert werden.
Durch die Angabe eines anderen Werts als 0 und none erzeugen Sie einen neuen Stapelkontext (stacking context).
<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>
perspective-origin[Bearbeiten]
Die perspective-origin-Eigenschaft legt die Position des Betrachters eines transformierten Elements fest.
Folgende Angaben sind möglich:
-
x-Achse: legt den Wert der (horizontalen) Abszissenachse des Fluchtpunkts fest-
left -
center -
right -
Wert: eine Längenangabe (Standardwert ist 50%)
-
-
y-Achse: legt den Wert der Ordinate (vertikale Höhe) fest-
top -
center -
bottom -
Wert: eine Längenangabe (Standardwert ist 50%)
-
-
initial: -
inherit: Wert wird vom Elternelement übernommen
perspective()-Funktion[Bearbeiten]
Die perspective()-Funktion legt eine Perspektiven-Matrix einer Transformation fest.
Folgende Angabe ist nötig:
Längepositive Längenangabe in px
Ein höherer Wert lässt das Element weiter weg erscheinen.
- W3C: perspective-property
- MDN: perspective
- MDN: perpsective()-Function
- CSS-Tricks: perspective
transform-style[Bearbeiten]
Mit der Eigenschaft transform-style können Sie festlegen, wie die Ansicht der Kind-Elemente in 3D dargestellt wird.
Folgende Angaben sind möglich:
flat: (Standardwert) Das Element wird nicht in 3d dargestelltpreserve-3d: Das Objekt wird dreidimensional dargestelltinitialinherit
#parent {
margin: 1em;
width: 18em;
height: 18em;
background-color: #3983ab;
opacity: 0.8;
transform-style: preserve-3d;
animation: drehung 10s infinite linear;
}
#container:hover #parent {
transform-style: flat;
}
@keyframes drehung {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#parent > :first-child {
background-color: #c32e04;
transform: translateZ(-100px) rotateY(45deg);
}
#parent > :last-child {
background-color: #dfac20;
transform: translateZ(50px) rotateX(20deg);
transform-origin: 50% top;
}
transform-style: preserve-3d; erst im IE Edge.
backface-visibility[Bearbeiten]
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 rgba(125,125,125,0.8);
text-align: center;
line-height: 200px;
font-size: 1.5em;
backface-visibility: visible;
}
.cube:hover div {
backface-visibility: hidden;
}
: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.
Weblinks[Bearbeiten]
- 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
animation: drehungum seine Achse. Durch die Einstellungtransform-style: preserve-3d;werden die roten und gelben Kind-Elemente in einem dreidimensionalen Raum dargestellt und scheinen über, bzw. unterhalb des blauen Kastens zu schweben.
Wenn Sie mit der Maus über den Kasten fahren, ändert sich die
transform-style-Eigenschaft:
sodass die Kästen als Flächen übereinander dargestellt werden.transform-style: flat;