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

.rueckseite {
width:100%;
height:480px;
background-color:#00ffff;
position: absolute;
}

4

Listing 4.17 Die Gestaltung von Vor- und Rückseite der Karte mit CSS

Da die Karte Ihr Smartphone, in diesem Fall ein iPhone, in horizontaler Ausrichtung
komplett ausfüllen soll, definieren Sie die Größe der Karte auf 320 Pixel mal 640
Pixel. Damit Vorder- und Rückseite nicht untereinander angezeigt werden, bedarf es
position:absolute; (Abbildung 4.43).

Abbildung 4.43 Die Rückseite wird angezeigt, da sie im HTML-Code als Letztes gesetzt
wurde. Die Vorderseite befindet sich versteckt unter der Rückseite.

Als Nächstes ergänzen Sie die Klasse karte um die Perspektive, mit der die Karte rotiert
werden soll. Dabei gilt, je kleiner die Zahl, desto verzerrter wird die Transformation
ausgeführt. Am besten ist es, Sie probieren verschiedene Werte einfach mal aus.

.karte {
width:320px;
height:480px;
position: relative;
-webkit-perspective: 600;
}