3D timeline design with CSS

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

3D timeline design

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>

Demo Download Source Code

* Do you like this story? Then why not share it with your Friends *
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Himanshu is a young engineer living in India. Currently working at LiveCareer as a software engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!"

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page