The Mad Magazine Fold-In Effect in CSS
Publikováno: 25.6.2020
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 … Read article “The Mad Magazine Fold-In Effect in CSS”
The post The Mad Magazine Fold-In Effect in CSS appeared first on CSS-Tricks.
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.