Day 31 Of #100DaysOfCode…
Built a Flipping Card with CSS Animations.
like i said on my previous articles,we can do alot of things with CSS Animations and i mean awesome things that can make our webpage look cool and user friendly.
so lets get started with the HTML document.
As we can see in the above HTML document,i have Li tags that have two div’s with class of “front” and “back”, so that means whenever we hover on the front div it will flip and show the back div…cool right?!.
OK lets check out the CSS style sheet..
Ok, the above is just a bunch of styles to arrange our cards and make them look pretty….
Now this is where the magic happens, as we can see we targeted the div.back and gave it a transform with rotateY of 90deg…this is to make it disappear from the screen.
Note: we must also name our keyframes otherwise it won’t work.
Notice that at the beginning i gave it a rotateY property of 90deg,now inside the keyframes,it will start from 0deg and rotate to 90deg making the div.front to disappear and showing the div.back… this is pretty cool right?
Ok there we have it ,our flipping cards are ready..dont forget to clap if you enjoyed the article.thanks!
