Card Component With 3D Animation

@mesutcifci

Thanks, mesutcifci!

I used vw and vh units and combined them with percentages for the background-position property. The reason I did this is that if you set the background-position property in just vw and vh units, the SVG backgrounds won't move around when the page is resized, but if you use just percentages, they move around too much (at least, I think so). I combined them using calc so that the SVGs would mostly stay in their place but move around just a little bit when the page is resized. 😊

However, that really isn't necessary. Simply using vw or vh units to position the background SVGs is totally fine and works great. You can also use good 'ol rems or px values instead. 😉

Here's a nice article from MDN on backgrounds and borders in CSS, and this article (also from MDN) goes into more depth on the background-position property. They might help you!

Keep coding (and happy coding, too)! 😁

@somaye-beiranvand

Thank you very much! 😊

@thomashertog

Haha, thanks, Thomas! 😀

@brasspetals

Thanks a lot, Anna! 😄

@mattstuddert

Thanks so much, Matt!

@artimys

Thanks, artimys! I guess all that messing around with calc was worth it! 😅

@ironheart93

Hey, alexandria! 👋 The background images in this challenge can be a little tricky, I know! Consider adding and positioning the background images with CSS background images. It's what I did in my solution and it seemed to work out pretty well. 👍

@AgataLiberska

Hey, Agata! 👋 It took a bunch of trial-and-error for me to find the values that I ended up settling with for the circle shapes in the background. At first, I was pretty sure positioning the background images would be easy, but I ended up spending well over an hour just fidgeting with the values for the position. 😅 Eventually, I found something I liked, and I went with it. 😀

@ApplePieGiraffe thanks, it's really helpful to know the process behind it. Those circles are my nightmare, this design looks so simple and then it's like hitting a brick wall :D

@AgataLiberska

Haha, I know right? 😉 Best of luck with this challenge! 👍

@laarnib

Thanks, laarnib!

@janegca

Haha, thanks, janegca!

@tediko

Thanks tediko! Happy coding to you, too!