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/...
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.
Man...algorithm sent you and I am very very grateful. You explain things soooooooo clearly, you are on point with everything. Thank you !! Subscribed !!!!
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🙏
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
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.
