CSS/Tutorials/Transform/3D-Transforms

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
CSS

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.


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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

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:


Flip-Card mit Transform:rotateY() 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 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
Beachten Sie, dass die perspective-Eigenschaft keinen Einfluss auf die Darstellung des Elements hat, sie liefert nur eine räumliche Dimension für Kindelemente.
Dies ist der Unterschied zur transform: perspective()-Funktion, die dem transformierten Element räumliche Tiefe gibt.

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).


Flip-Cards 25 Jahre SELFHTML ansehen …
<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änge positive Längenangabe in px


Ein höherer Wert lässt das Element weiter weg erscheinen.


transform-style[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • flat: (Standardwert) Das Element wird nicht in 3d dargestellt
  • preserve-3d: Das Objekt wird dreidimensional dargestellt
  • initial
  • inherit


Beispiel ansehen …
    #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;
    }
Der blaue Kasten rotiert durch die animation: drehung um seine Achse. Durch die Einstellung

transform-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:

transform-style: flat;

sodass die Kästen als Flächen übereinander dargestellt werden.


Beachten Sie: Auch wenn CSS-transforms schon im IE 11 unterstützt wird, funktioniert 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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 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;
}
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.



Weblinks[Bearbeiten]