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

-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all 1.4s ease-in-out;
}

4

Die Definitionen sind dieselben, lediglich die Werte sind unterschiedlich. Der gerin-
gere z-index stellt sicher, dass die Rückseite zunächst verborgen ist. -webkit-trans-
form transformiert die Rückseite auf der Y-Achse um minus 180 Grad.

Damit eine Animation gestartet werden kann, benötigen Sie auch hier wieder jQuery.
Sie fügen der Klasse karte bei Berührung eine weitere Klasse drehen hinzu, die die
Animation in Gang setzt:

<script type="text/javascript">
$(document).ready(function(){
$('.karte').toggle(function(){
$(this).addClass('drehen');
},function(){
$(this).removeClass('drehen');
});
});
</script>

Als Letztes fügen Sie im CSS-Code noch die Klasse drehen ein. Da die Karte sich bei der
Anzeige der Vorderseite anders drehen muss als bei Anzeige der Rückseite, brauchen
Sie insgesamt zwei Definitionen:

.karte.drehen .vorderseite {
z-index: 200;
-webkit-transform: rotateY(180deg);
}
.karte.drehen .rueckseite {
z-index: 300;
-webkit-transform: rotateY(0deg);
}

Sie passen den z-index an, um die Sichtbarkeit zu gewährleisten. Die jeweilige Rota-
tion auf der Y-Achse definieren Sie wieder über -webkit-transform .

Ihre erste rotierende Karte (Abbildung 4.44)! Denken Sie nur an die Möglichkeiten:
Auf der Vorderseite könnte die Funktionalität Ihrer App bereitstehen. Dreht der
Benutzer die Karte mit einer Berührung eines Buttons, so können Sie auf der Rück-
seite z. B. Einstellmöglichkeiten zu Ansicht oder Funktionen unterbringen. Anima-