Back

CSS experimentations, hovercard

Trying to demo a simplistic CSS3-only hovercard mechanism.

Fake 3D book

Webkit 3D translation

This hovercard actually uses real '3D' translation to flip the card. Unfortunately this only works in webkit-related browsers. Hover over the card to see :)

This is the back

Duc-tape is like the force, it has a light side, it has a dark side and it holds the universe together...

Faux 3D flip-card

Using skew and scale translations this card appears to 3D flip over, smoke and mirrors baby! Transition-delay helps to flip first the front out, then the back in and the reverse...

This is the back

Duc-tape is like the force, it has a light side, it has a dark side and it holds the universe together...

Faux 3D with :target pseudo-selector

This card is the same as the previous one with the adition of using a :target pseudo-selector instead of :hover. This way the card stays flipped until you click the X on the back :).

Options

This is the back

Duc-tape is like the force, it has a light side, it has a dark side and it holds the universe together...

X