4
Divtober Day 27: Film
source link: https://dev.to/alvaromontoro/divtober-day-27-film-4a8a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
divtober (27 Part Series)
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.)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK