Floating Card Animations with CSS and Framer Motion
In this video, we're creating a floating 3D card with rotation animations and a light sheen effect, inspired by the profile card in Arc.
💾 Starter code: https://github.com/Built-With-Code/3d...
⏭️ Watch This Next: • Blur + Zoom Card Parallax with Framer Motion
📱 Follow online: / built_with_code
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:11 - Starter code
0:27 - 3D rotation on hover
6:18 - Smoothing animations with springs
6:52 - Scale animation
8:43 - Light seen effect
13:42 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!