Скачать или смотреть Create an awesome 3D flipping card animation with HTML and CSS

In this video I take a dive into how transform-style works in letting child elements stay in the 3D space instead of flat in their parent, as well as how you might want to use backface-visibility , perspective , and some other cool stuff that put together can create a really cool 3D flipping effect that will add a nice touch to your website ✨

💻 Source code

https://codepen.io/francescovetere/pe...

📚 Some useful resources

transform-style: https://developer.mozilla.org/en-US/d...
backface-visibility: https://www.w3schools.com/cssref/css3...
perspective: https://www.w3schools.com/cssref/css3...

🌍 Other places where you can find me

GitHub: https://github.com/francescovetere
Codepen: https://codepen.io/francescovetere
Frontend Mentor: https://www.frontendmentor.io/profile...

⌚ Timestamps

00:00 Intro
00:20 Basic markup
01:19 Basic styles
01:42 General card layout
04:29 backface-visibility
05:01 Hover effect
06:24 transform-style
07:22 perspective
08:41 Outro