Swatch Book With CSS3 and jQuery

Mary Lou is going to show you another really unique trick to spice your design. This tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, she’ll rotate the other swatches in order to reveal the selected one.

For the markup Mary Lou will have a simple structure with several divisions where each one contains an icon span and a h4. The last division will not have an icon span but instead an h4 and an h5 element. This last division will be your “cover”, the top most layer of the swatch book. Now let's take a look at the style. First, let’s define the style for the containing wrapper. She’ll make it the same width like one of the swatches (although they will take up more space) so that she can easily center it.