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.

‍