CSS Card Hover Effect In Minutes: Using CSS Perspective

There's plenty great 3D libraries out there that help turn your 2D website into a 3D experience. But did you ever look at CSS Perspective animations before? It's a very powerful and easy way to create basic 3D animations in CSS only, without using any of these libraries. In today's video we'll recreate the profile card in Arc's browser, that has a 3D tilt animation when you hover your cursor over it. We create the 3D tilting with plain CSS only, and add a little bit of JavaScript to let the card react to the cursor's position. Just like in most of the video's, we combine this by using Tailwind, TypeScript and React as well. Let's dive in! ✨ Become a PRO today via https://www.frontend.fyi/pro 💬 Join us on Discord: https://www.frontend.fyi/discord 🔗 Check the code and read the article: https://www.frontend.fyi/v/css-3d-perspective-animations 👀 Timestamps 00:00 - Intro 00:45 - What we'll be building 01:15 - Start building - add perspective 03:28 - Playing with the 3D transform 04:50 - Add mouse events to get cursor position 09:10 - Use cursor position to convert to degrees of rotation 12:00 - Set rotation values as CSS variables, and make the card move] 13:46 - Add moving glare on the card 19:27 - End result & outro #css #animations #frontend