HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 186

Die Vorderseite der Karte erweitern Sie folgendermaßen:
.vorderseite {
width:100%;
height:480px;
background-color:#ff0000;
position: absolute;
z-index: 200;
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all 1.4s ease-in-out;
}
Listing 4.18 Die Einbindung der 3D-Animation
Der z-index gibt an, auf welcher Ebene das Element liegt. Elemente mit einem höhe-
ren Wert überlagern Elemente mit einem niedrigen Wert. Sie können sich das wie
Zwiebelschichten vorstellen.
Danach modifizieren Sie das Erscheinungsbild des Elements über -webkit-transform .
Der Wert rotateY beschreibt die Rotation auf der Y-Achse. Der Wert in den Klammern
gibt die Gradzahl an ( deg für Degree ). Da es sich um die Vorderseite handelt, liegt die
Transformation bei null Grad. Über -webkit-transform-style: preserve-3d legen Sie
fest, dass bei der Transformation die Perspektive gewahrt bleibt und die Animation
somit realistischer aussieht. -webkit-backface-visibility: hidden; blendet die
Rückseite des Elements automatisch aus, so dass diese nicht zu Ihrer Klasse rueck-
seite in Konkurrenz steht. Würden Sie dies nicht konfigurieren, so würde bei der
Drehung des Elements dessen Inhalt spiegelverkehrt dargestellt werden.
Im Anschluss wird nun noch die Animation selbst über -webkit-transition gesteu-
ert.
Die Eigenschaften der rueckseite legen Sie nach ähnlichem Prinzip fest:
.rueckseite {
width:100%;
height:480px;
background-color:#00ffff;
position: absolute;
z-index: 100;