Flipboard CSS buttons
Author: Dynamic Drive
Flipboard creates a series of CSS buttons that flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect. It employs CSS3 transform and transitions to do the heavy work. The menu works in IE10+, and all modern versions of FF, Chrome, Safari, and Opera. It degrades perfectly with older browsers, down to IE7.
On a technical note, each button consists of 3 levels deep of markup,
LI -> A -> SPAN. This is necessary to create the
desired effect. When the mouse rolls over the outer
LI parent, we
rotate both the inner
SPAN elements 180
degrees using CSS3 transform's
rotateY(180deg) value. The key here
is to declare this value on both of the inner elements, so while the child
A element causes any content inside to appear as a mirror of itself when
rotated, the grand child
SPAN element restores the content back to
its proper orientation.
Note: Social icons used can be downloaded here.