Skip to content
Submitted over 4 years ago

Card Component With 3D Animation

sass/scss
ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, everybody! 👋

This was a fun, simple challenge which I enjoyed! I added a cool little (and surprisingly simple) 3d hover effect to the card component (thanks to Dev Ed, once again). 😆

And for those tricky background SVGs? I ended up using a combination viewport width and height units and percentages to have the SVGs subtly change their position when the screen is resized. IDK if they match the design exactly but they look okay! 😂

Feedback is welcome and appreciated, of course! 😊

Happy coding! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Mesut Çifci•485
    @mesutcifci

    Hi. Congratulations.

    I'm trying to do this challenge too. I trouble with background images position 😄 Your solution is perfect.

    I want to use this in my code but i don't want just copy paste. Also i want to understand what's the idea on this solution.

    Could you explain me how your code(background-position) works.

    Thanks.

  • somaye beiranvand•220
    @somaye-beiranvand

    Hi APG

    The way you managed the position of background bubbles is amazing. congratulation

  • Thomas Hertog•805
    @thomashertog

    Hell yeah, wasn't sure it could be done with background (and background-position) and really wanted to spend lots of time to get those values right. Matt pointed me into this one, and I must say, this is effing impressive! haven't looked at everything code-related, but the background-solution is really nice!

  • Anna Leigh•5,135
    @brasspetals

    APG back at it again - that 3D hover effect is trippy! I can always count on you to add a fun addition to your solution! 😄

    Cool effects aside, it looks essentially pixel-perfect to me, and you have nailed those pesky background images it seems most people (I haven't done this one yet) have struggled with. 🙌

  • Matt Studdert•13,611
    @mattstuddert

    Love this, APG! 😍

    Awesome to see you going above and beyond in these challenges and experimenting with additional effects.

    You’re doing an amazing job!

  • Arturo Simon•1,805
    @artimys

    Hands down APG, It's great that you took the time to properly calc the size of those bg images without media queries. The effects are always the cherry on top.

    Awesome work 👍

  • alexandria•35
    @ironheart93

    This looks really good. I am currently doing this challenge and could not really figure out the CSS background images unfortunately and (I did not want to use a div).

  • Agata Liberska•4,075
    @AgataLiberska

    Hi @ApplePieGiraffe, how did you come up with the values to position the circles? Was it trial and error or is there a secret behind it? :D

  • LB•35
    @laarnib

    Wow! I love the effect that you added on the card! 🙌 And nice work on the background bubbles. Still couldn't make mine to stay where they're supposed to 😃

  • Jane•1,040
    @janegca

    Thanks APG, for fixing those pesky background bubbles in their positions, been scratching my head trying to figure it out for a few days now. Nice work :)

  • tediko•6,700
    @tediko

    Hello, ApplePieGiraffe! 👋

    I'm not gonna lie, can't wait to steal this 3D effect idea and put it in one of my project! Amazing work!

    Happy coding! 😄

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord