Das war schon immer mein Lieblingsteil im Mad Magazine. Eine Seite (ich glaube, die Innenseite des hinteren Umschlags) war mit einer verrückten Illustration bedeckt. Man faltete diese Seite in drei Teile, wobei der mittlere Drittel des Bildes abgedeckt wurde, und ein neues Bild entstand, da die Illustration perfekt auf diese Falten abgestimmt war. Das neue Bild (und der Text!) war Teil des Witzes.
Jeder war ein cleverer Trick, deshalb freue ich mich natürlich zu sehen, dass dieser Trick seinen Weg in CSS gefunden hat, mit freundlicher Genehmigung von Thomas Park.
Ich bin ziemlich überrascht, dass Thomas das mit einem einzigen Zustand (:hover / :active) schaffen konnte. Ich hätte einen Nickel darauf verwettet, dass @keyframes benötigt worden wären, um die 3D-Transformationen während der Animation in verschiedene Positionen zu bringen, aber es sieht so aus, als würden mehrere Übergänge (sowohl übergeordnet als auch untergeordnet) das erledigen.
Wenn Sie Lust auf andere coole CSS-Papier-Effekte haben…
Hier ist ein neuer von Lynn Fisher
Ein Klassiker von Mandy Michael
Und mehr Falten von Mattia Astorino