Tom’s Two Cents: CSS3: Super Awesome 3D Flip Cards

October 2, 2014

Blog | Development | Tom’s Two Cents: CSS3: Super Awesome 3D Flip Cards
Tom’s Two Cents: CSS3: Super Awesome 3D Flip Cards

Until recently, to create animations or visual effects web developers had to reply heavily on Flash Plugins or JavaScript to get the job done. Those days are over, CSS3 3D transforms offers us a better solution to creating these cool effects.  There are lots of demos out there that show what it can do, but most fall into the category of, “I made this because I could, but it may not be practical in everyday use.”  Some examples are the“Star Wars” intro, or this cool FPS.

To challenge the status quo, I created a demo for more practical application of CSS3, which uses 3D transforms to simulate a ‘flip card’ effect. 

This effect is useful if your site uses an image grid, such as an “About Us” page, where you want to show information about each team member, but are tight on space.

It’s a neat trick to impress your users and add a little extra oomph to your site, all without JavaScript.

Currently, according to CanIUse.com, most browsers support CSS3, except IE 11 which has partial support, so try it out for yourself!

Interested in other CSS3 demos? Drop us a line @GeekHive.

Tom Deluca, Front-End Developer, GeekHive

Tom DeLuca

Developer
Tags
  • CSS
  • Tutorial

Recent Work

Check out what else we've been working on