In this tutorial we will create a CSS Coverflow image display using some of the new properties introduced in CSS3. Many of the properties that we will be dealing with like Perspective and transform: matrix3D deal with manipulating Divs on the X, Y, and Z axis to give it the illusion it is being rotated on a 3D plane. Other properties like Transition and Box-Reflect will help add some nice styles to better the User Experience. Here is an example of what we will be making today.

long shadow css3

The HTML Markup

We will start by creating the HTML markup and the basic layout of our project. We will have five images wrapped within a centered div so we can contain our images.

Box-Reflect

To add some visual flare, we will use the Box-Reflect property. Although this only works in Webkit browsers (at this point only Chrome and Safari), it is still a nice CSS3 style to learn. We designate its placement as below, the offset will be 0px from the image, and use a gradient to mask the reflection and have it fade away most of the reflected image. Update the img selector using the code below.

Transition and Transform

Next, we will use the transform: matrix3D to adjust the X,Y,Z axis and z-value (Z-value is how close or how far the object is from you). In total there will be 16 numbers that you can adjust. The X,Y,Z and Z-value each get a row and a column that makes it a 4 x 4 grid, thus giving you 16 values. The default values will look something like this:

[1,0,0,0]
[0,1,0,0]
[0,0,1,0]
[0,0,0,1]

After adjusting these values you will be able to see the DIVs transform. To make your images have smooth animations, you will need to add the Transition property and adjust its speed (we chose .04s). Update the img selector CSS code with the code provided below.

A Little Perspective

Next we will add the Perspective property to the #container ID. The perspective property defines how many pixels a 3D element is placed from the view and allows you to change the perspective on how an element is viewed. The Perspective property is strange. Even though we apply it to the #container, the child element (the img in this case) gets the perspective view. The perspective is measured by pixels. The smaller the pixel value, the more exaggerated. The more the pixel value the less exaggerated the perspective is.

We must also designate the origin which helps defines where a 3D element is in relation to the x and y axis. When we set it to 50% 50%, we are viewing it right in the middle with no shift.

Update your #container CSS with the code below to see the results.

The Hover State

The last step is to add the ending animation point and the action that triggers it. This can easily be done by adding a :hover state to the images so when the user hovers over the image, it will toggle an animation. By adding the img:hover line of code AFTER the img selector and changing the values a little on the transform: matrix3D, we will now have a complete animation and an event that will trigger the animation.

That is all we need to create a CSS3 coverflow. Your code should now look similar to the code block below.

Wrapping it Up

This tutorial is a great exercise in what to expect with future CSS updates. Although it may not be a good idea to implement everything from this tutorial in your final release, it is still worthwhile to learn these techniques as they will eventually become the standard. If you want to practice a little more and see how the perspective property works, visit the W3 editor to test out the different values.

Download Source Files