Close

Google Now Inspired Flip Cards

This is a template of a Google Now inspired flip card layout, designed using HTML, CSS, and JavaScript. The Li element of lists has been used to display the details in a list whereas JavaScript functions have been used to implement the flipping animations. Variables are used to define values to avoid using values again and again in different places such as colors. The predefined colors are $color1: #5271C2, $color2: #35a541, $color3: #bdb235, $color4: #db6623, $color5: #3e5eb3, and $color6: #aa9e5c. The body of the form is given the styles of min-height as 100vh, background as lighten(black, 12), color as white, font family as 'Lato', and text rendering as optimizeLegibility. The card is given the styles float as left, width as calc(100% * .3333 - 30px + .3333 * 30px), height as 340px, margin as 0 30px 30px 0, and perspective as 1000. For the flipper, the cursor is set to pointer to display the hand cursor, transform style is set to preserve-3d and back face visibility is set as hidden. In a flipping event, the card takes a transformation of rotateY(180deg) scale(1.1) and changes the background to lighten(black, 8). Source: https://codepen.io/ettrics/pen/zxMPWj/

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *