CSS 3D transforms are just awesome. I’ve seen before some cool and inspiring implementations in the wild and still I can’t believe I didn’t had the chance to write an article on this topic ‘til now.
So, what’s the idea for this article? Let’s say you own a blog, I was thinking about having a nice looking 3D folding list that contains the main social buttons and when people reach at the end of an article, the initial folded list would smoothly unfold. This could be helpful if you want to draw users’ attention, something like: “Hey, did you like my article? Connect with me!”.
The markup is built using an unordered list which contains snippets and links for each social network. Also, the heading will be able to toggle the folding list.
Each li has an HTML hook class attribute for using color coding: blue for Twitter, orange for RSS and so forth. The fontawesome-* ones are responsible for rendering the social icons using Font Awesome.
We’ll need some jQuery to manipulate the folding list and Modernizr for CSS 3D transforms detection.
As you can see below, the code will be executed only if csstransforms3d HTML class is added by Modernizr. The advantage here is that the rest of jQuery code will not be executed on browsers that do not support CSS 3D transforms.
If you’re willing to read more about CSS 3D Transforms, then you should try Intro to CSS 3D transforms, I can’t recommend it enough.
For simplicity’s sake, I will not include below all the vendor prefixed properties. You’ll find them all in the demo.
Font Awesome styles
Besides the above styles, we’ll need to include also the custom web font we’re using it here for the social icons. Including a font for these icons might seem overwhelming, but if you’re already using it in your project or website, this will come in handy.