sheifg / card-flip-animation Goto Github PK

This project is designed to practice and show my knowledge of CSS transform, transition and animation. The task is to create a web page with cards that can be flipped to reveal information on the backside using CSS animations.

1. HTML structure: create an HTML document with card elements that represent front and back sides.
2. CSS styling: apply CSS styles to create visually appealing cards, including front and back designs.
3. CSS transform: use CSS transform property to rotate the cards when they are flipped.
4. CSS transition: implement CSS transition property to create smooth card flipping animations.
5. CSS animation: create a CSS animation for the card flip effect when the user hovers over or clicks on a card.
6. Interactivity: make the cards interactive, allowing users to flip them by hovering or clicking.
7. Documentation: provide comments within the HTML and CSS code to explain key sections and styles.