This tutorial will tell you how to create timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.
Use a radio input trick to create this fun css only timeline like structure. The main concept 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. We’ll be using CSS 3D transform, transitions and sibling selectors
THE MARKUP Of CCS 3D TIMELINE DESIGN WITH CSS :
Let's create an list with the class "timeline". We'll add several list items with the class "event". Each event have their own radio input, an empty label, thumbnail and a container for the content. This container will have perspective, so we willl give it the class "content-perspective". Note that the radio inputs all have the same name. That how we indicate that they all belong to the same group name and we can only select one at a time.
<ul class="timeline"> <li class="event"> <input type="radio" name="tl-group" checked/> <label></label> <div class="thumb user-4"><span>19 Nov</span></div> <div class="content-perspective"> <div class="content"> <div class="content-inner"> <h3>I find your lack of faith disturbing</h3> <p>Some text</p> </div> </div> </div> </li> <li class="event"> <input type="radio" name="tl-group"/> <!-- TricksWay.com - Makes You Smarter --> </li> <!-- Your Text Here ! --> </ul>