CSS3 backface-visibility

zur Seite Thema Transform

Bei beiden Elementen ist die Rückseite ausgeblendet. Das zweite Element wird schon zu Beginn um 180 Grad gedreht, deshalb ist es beim Start nicht sichtbar. Berührt man das umgebende div, werden beide Elemente um 180 Grad weiter gedreht, so dass das zweite sichtbar wird, und das erste unsichtbar.

Im nächsten Schritt werden die beiden Bilder per position: absolute direkt übereinander gelegt. Dadurch entsteht der Effekt einer Vorderseite und Rückseite. Da beide Bilder mit position absolute versehen wurden, erkennt das Elternelement diese nicht mehr und hat somit keine Höhe mehr, sondern nur noch die festgelegte Breite erkennbar am Border Strich.