Responsive CSS Timeline with 3D Effect

In this tutorial Mary Lou is going to experiment with perspective and use a radio input trick to create a fun css-only timeline-like structure. The idea is to show a teaser of an item and when clicking on the associated radio input, the content will expand and rotate in 3D, giving some depth to the whole thing. She’ll be using CSS 3D transform, transitions and sibling selectors. Note that the 3D effect looks best in WebKit browsers. Unfortunately, Firefox does not play along very nicely.

Let’s create an unordered list which will have the class “timeline”. Mary Lou will add several list items with the class “event”. Each event will have a radio input, an empty label, a thumbnail and a container for the content. This container will have perspective, so she’ll give it the class “content-perspective”. Note that the radio inputs all have the same name. That’s how she indicates that they all belong to the same group and she can only select one at a time. The thumbnail will have the class “thumb” and and additional class for the user which will be user-1 to user-8 in our case. The span will be used to add the date.