3. Card with 3D flip effect

Requirements

• Develop a UI for a fictional card
• Make the card filp on hover to show more information on its back to the user
• There should be 3D effect when the card is flipping
• (optional) Add more cards to make a list/grid
• ⭐ Make it as unique/cool as you like

Design preview

Personal preference

Resources

• Free images
• Playground

Learn more

• CSS transforms MDN
• Intro to CSS 3D transforms
• Flip effect
• Performant animations
• Card designs for inspiration in Figma
• Card designs for inspiration on Dribbble

Discussion topics

• Glitches when the hover is on the card
• Better ways to accomplish smooth effects
• Depth effect
• Semantic tags in decorative elements