@@Gunnar Bittersmann
Hier aber die Frage: Wozu der Effekt? Wem ist damit geholfen? Mir scheint: niemandem. Der Effekt ist nur um seiner selbst Willen da – ein sehr schwaches Argument, sowas zu implementieren.
Meine Einschätzung erfolgte anhand der Darstellung in meinem Browser: Firefox. Da blickt man nach der Drehung auf die Rückseite desselben Bilds, d.h. man sieht dessen Spiegelbild.
@Rolf B wies mich darauf hin, dass da doch zwei verschiedene Bilder auf Vorder- und Rückseite seien. Huch‽ Im Browser, den ich tunlichst meide wie die Covid-19, sind da tatsächlich zwei verschiedene Bilder – wobei es beim Umdrehen flackert. Im Safari flackert’s nicht, da springt’s um.
Das Flackern in Chrome liegt daran, dass du backface-visibility: hidden
für das erste <div class="card__face">
gesetzt hast, aber nicht für das zweite <div class="card__face--back">
.
Wenn man BEM nutzt, ist die Klassenangabe auch falsch: “Add modifier classes only to blocks/elements they modify, and keep the original class.” [BEM] Es müsste <div class="card__face card__face--back">
sein.
Das Umspringen in Safari kommt daher, dass der backface-visibility
noch nicht kennt, sondern nur -webkit-backface-visibility
. [CanIUse] Also beides angeben.
Warum das im Firefox nicht funktioniert, ist mir noch ein Rätsel. Zumal man durch backface-visibility: hidden
die Rückseite (d.h. das Spiegelbild) doch eigentlich gar nicht sehen können sollte … 🤔
😷 LLAP
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon