Flipping Cards

Flipping cards! Finally have the time to create this.

This is pretty fun to include in a project for hiding less important information behind a catchy visual. This component can be used in a lot of scenario. Example of use cases as below:

• Products / Services
• Process
• Social Media
• Image and details
• Staff details
• Projects
• and more...

Just be creative and you will find them interesting to play with.

The trick here is to create 2 div; the front of the card and the back of the card. Then give the parent container some perspective value and rotate from the front card 90 degree from left to right and hide it. Right after that, show the back of the card and again rotate it but from -90 degree to it's original position which is 0 degree. You can do this on Mouse Hover or Mouse Click interaction. All depends on your project design concept.

If you need help in implementation, DM me. I'll be around.

Have fun cloning. 😄