Sandbox Icon Sandbox - CSS3 Transitions case study


This is just me playing around with CSS Animations and Transitions (and having a lot of fun, I might add)

The cards are marked up in HTML 5 as list items within an Un-ordered list.

I am selecting the list items using ul li:nth-child(odd) and ul li:nth-child(even)

The cards are set at an angle using the CSS3 2D rotate transform, the opacity is set at .5 and when you focus over a card it moves to full opacity. The cards have a shadowed background using box-shadow, the header text on each card is using the text-shadow feature, the cards scale and rotate when you focus your mouse over them, and the CSS3 transition is timed to be .45 seconds linear.

Lastly, the cards fade out on click with some Jquery functionality

Pretty cool stuff!

You may access the code used in this case study via my GitHub account.