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

Тэги:

#frontend #webdevelopment #css #css_animations #animations

Скачать видео