3D Flip Card on Hover

Step 1: Create the card

Grab a div, place it in the body of your page and give it a class of card with these settings:

  • Display > Flex, Horizontal, Align:Stretch, Justify:Start
  • Width: 480px
  • Height: 310px
  • Overflow: Hidden
  • Position: Relative
  • Border Radius: 15px
  • Outer Shadow > Distance: 10px, Blur: 60%, Size, 10px, Color: #00000 30%

Then set the background according to your need.

Now let's add an highlight effect. Place a div inside your card and give it a class of card-highlight with these settings:

  • Width and Height: 400px
  • Position: Absolute, top 0px
  • Background Color: White
  • Border Radius: 300px
  • Opacity: 10% (if your card is dark) or 20% (if it's light)
  • Filters > Blur: 50px

Now we can style our card with a card-logo and a card-number.

Step 2: Add the mouseover rotation

Open the Interactions menu (press 'H' on your keyboard) and create a new Page Trigger triggered by 'Mouse move in viewport'.

Create a new Mouse Animation with these settings:

Mouse X Actions:

  • Card-highlight 0%: Move, Transform X: 100%
  • Card-highlight 100%: Move, Transform X: -100%
  • Card 0%: Rotate, Rotate Y: -20 DEG
  • Card 100%: Rotate, Rotate Y: 20 DEG

Mouse Y Actions:

  • Card-highlight 0%: Move, Transform Y: 50%
  • Card-highlight 100%: Move, Transform Y: -50%
  • Card 0%: Rotate, Rotate X: 20 DEG
  • Card 100%: Rotate, Rotate X: -20 DEG

And voila! You can now publish your website and enjoy your work.

Short Description:
Create a continuous animation that's triggered by the position of your mouse as you hover over a credit card.