Flip Card in CSS (Like Apple)

Using flip cards is a great way to reveal additional content in a fun and interactive way. In this video, I will show you how to implement flip card animation in CSS, similar to the one on Apple's site.
Apple example: www.apple.com/apple-card/

[@michaelli2339]

Hey man just wanted to say awesome job explaining everything thoroughly. I haven't come across a tutorial that is better than this one. Clear, concise, yet includes everything we need to know. Thank you so much.

[@tahazsh]

@@michaelli2339 Thank you so much for your kind words! I really appreciate it 🙏

[@roxsganesh8668]

The way you explain everything is just top notch. Very nice, clear and easy to understand. Thanks for the great video🙏🙏, Keep up the great work.

[@tahazsh]

Thanks a lot! You just made my day! 🙏

[@Dj7wiLLY]

Man...algorithm sent you and I am very very grateful. You explain things soooooooo clearly, you are on point with everything. Thank you !! Subscribed !!!!

[@tahazsh]

Thank you for the kind words. You just made my day! 🙏

[@mahmoudbarmawi4112]

You have done a more than wonderful job ♥.
Thank you for putting in our hands beautiful things like this, which are difficult for us to imagine😅 or do.
Thank you very much🙏

[@tahazsh]

Thank you so much for the kind words. You just made my day! 🙏

[@mdnoverflow]

css evolves to be a real rendering machine)

[@lasindunuwanga5292]

you are very talented

[@tahazsh]

Thanks a lot!

[@rayyanwz]

great video buddy keep it up ❤❤

[@tahazsh]

Thanks a lot! 🙏

[@TheGarageboyz]

Nice. Any code to download? What about browser compatibility?

[@ce9916]

What do you recommend to keep up with all the new js & css stuff? Never heard of these css properties!

[@tahazsh]

I would say that the best place to learn more stuff is to read code. For example, you can go to codepen.io/ and check the demos you like, and then start dissecting them to see how they work. Even if you don't fully understand how they work, you will at least notice new properties that you didn't know about, and then you can search and learn about them.

[@waykanstudio]

we need or i need more examples, when you have a chance.!

[@mdnoverflow]

amazing content,
can you explain a bit more on perspective property ?

[@tahazsh]

Thank you! Sure! The perspective property determines how far an element is from the screen (on the z-axis). When it's 0px, it means the element is right in front of your screen. As you increase the value, the element moves farther away, creating depth and perspective.
There's also another property called perspective-origin, which determines the point you're looking at the element from. By default, it's set to the center. But you can change it to something else, like 'bottom right,' and it will be as if you're looking at the element from the bottom right corner!
To give you a simple example in the real world. Imagine a cube right in front of a person. Using perspective 0px will be as if the distance between the person's face and the cube is zero. In the example from the video, I used 3200px, so it's 3200px away from the screen. Just like in real life, the farther an object is, the more you can see of it.
Lastly, two things to note:
- The perspective property is disabled by default (set to 'none'), meaning the object lives in a 2D world.
- The perspective and perspective-origin properties should be set on the parent element to affect all the children (not the element itself).
I hope my answer made it a little bit clearer. Let me know if you have any other questions. 😄
I recommend checking the MDN docs for both properties to see them in action:
- perspective: developer.mozilla.org/en-US/docs/Web/CSS/perspective
- perspective-origin: developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin

[@tsukasatenma69]

So good but so few views

[@tahazsh]

Thank you! 😄

[@user-qj8up1nh2r]

nice video source code please?