The Mad Magazine Fold-In Effect in CSS

This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to perfectly line up with those folds. The new image (and text!) was part of the joke.

Every one was a clever trick, so of course, I’m delighted to see that trick make it’s way to CSS, courtesy of Thomas Park.

I’m pretty surprised Thomas was able to do it with a single state (:hover / :active) . I would have bet a nickel that it would have needed @keyframes to adjust the 3D transforms into different positions during the animation, but it looks like multiple transitions happening (both parent and child) handle that.

---

If you’re in the mood for other cool CSS paper effects…

Here’s a new one from Lynn Fischer:

A classic from Mandy Michael:

And more folding from Mattia Astorino:

Direct Link to Article — Permalink

The post The Mad Magazine Fold-In Effect in CSS appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/3dKZS26
via IFTTT