Submit your widget

pure CSS 3D timeline effect

Created 5 years ago   Views 20059   downloads 3793    Author tympanus
 pure CSS 3D  timeline effect
View DemoDownload 61.8 KB
60
Share |

This tutorial will tell you  how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.

we are 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. We’ll be using CSS 3D transform, transitions and sibling selectors

THE MARKUP

Let’s create an unordered list which will have the class “timeline”. We’ll 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 we’ll give it the class “content-perspective”. Note that the radio inputs all have the same name. That’s how we indicate that they all belong to the same group 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"/>
        <!-- ... -->
    </li>
 
    <!-- ... -->
 
</ul>

Read more:http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/

Tag: timers