El efecto desplegable de Mad Magazine en CSS

Esto siempre fue lo que más me gustó de la revista Mad. Una página (el interior de la contraportada, creo) estaba cubierta por una ilustración estrafalaria. Doblabas esa página en tercios, cubriendo el tercio medio de esa imagen, y se formaba una nueva imagen porque la ilustración fue diseñada para alinearse perfectamente con esos pliegues. La nueva imagen (¡y texto!) era parte de la broma.

Cada uno fue un truco inteligente, así que, por supuesto, estoy encantado de ver que ese truco llega a CSS, cortesía de Thomas Park.

Estoy bastante sorprendido de que Thomas haya podido hacerlo con un solo estado ( :hover/ :active). Habría apostado un centavo a que habría sido necesario @keyframesajustar las transformaciones 3D en diferentes posiciones durante la animación, pero parece que varias transiciones (tanto principales como secundarias) se encargan de eso.

Si estás de humor para otros efectos de papel CSS geniales…

Aquí hay uno nuevo de Lynn Fisher:

Un clásico de Mandy Michael:

Y más plegables de Mattia Astorino:

Enlace directo →