DEV Community

Cover image for Divtober Day 27: Film
Alvaro Montoro
Alvaro Montoro

Posted on

12 2

Divtober Day 27: Film

Day of the word is "film", so here is a clapperboard (a.k.a. slate) needed in every film set to help with the audio/video synchronization. It animates a little on hover.

It uses perspective to simulate the 3D, but there's more to it: as the clapperboard is drawn with a single HTML tag we don't have enough elements to go "full 3D." The solution was using shadows and stacking them in a way that provides a fake sense of perspective (on top of the CSS perspective.)

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More