Pixel-perfect card component with 3d hover effect

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Greetings, Syed Ali Mansoor! 👋

  Amazing job on this challenge! 👏 You've done a great job in matching the design preview for this challenge (as you mentioned) and the 3D hover state that you added to the card is pretty awesome! 😀 Everything else looks good and responds well! 👍

  (And thanks for the mention—that's encouraging and happy for me to hear! 😅)

  Of course—keep coding (and happy coding, too)! 😁

  1
• 

  Akshay Meshram•390

  @akshay63Posted over 3 years ago

  Hey @Syed Ali Mansoor! Great effects, there. I loved it👌😉. Thanks for sharing your solution. I'm too learning a lot from APG. Btw how did you achieve the hover effect though?

  1

  ---

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  @akshay63 Thanks!

  Check out the README file, I have added an explanation in there.

  You basically add a "mousemove" event listener to the element, in which you get the position of the mouse cursor, and then you get that position as a percentage of the width/height of the element.

  You use this percentage to rotate the card on the X and Y axes. In my example I wanted the card to rotate no more than 30deg on both axes, so I did this:

  rotateY = xPercent * 30;
  rotateX = -(yPercent * 30);
  

  It's a bit complicated but we got this 💪😤

  0
• 

  coreyhclay•35

  @coreyhclayPosted over 3 years ago

  you've got an extra space between "12m" and "+". this solution is x1000 better than mine, i'm learning a lot from your repository, thanks

  1

  ---

  

  Syed Ali Mansoor•460

  @syedalimansoorPosted over 3 years ago

  @coreyhclay Oops, thanks for the heads up. Small details like these are key to making a good website.

  Thanks for the compliment as well and happy coding!

  1