What Google Does With ThreeJS, We Can Do With CSS ONLY!

Last week I came across this Web Showcase website built by Google. I really liked how they created all these nice animations on the page, and made this card rotate 180 degrees to show it's contents. Then I popped open the inspector to see how they did it — and noticed it was built with ThreeJS. Looking at all the details it has, it might make sense. But I also thought: We can do this with CSS too! So in todays video I'll be giving it a go to rebuild this with CSS only (just a liiitle bit of JS too). Make sure to check out the live playground and code via the link below too! ✨ Become a PRO today via https://www.frontend.fyi/pro 🔗 Code, live playground and article here: https://www.frontend.fyi/v/css-3d-card-animation 🔗 Google's Web Showcase Website: https://thewebshowcase.withgoogle.com/ Timestamps: 00:00 - Intro 00:54 - Review initial setup 04:56 - Start rebuild 05:15 - Card rotation on hover 09:07 - Add focus state too for a11y 10:16 - Add animation to make card fullscreen 18:55 - Review end result 19:40 - Outro #frontend #css #html #animations #threejs