Streets Ahead

Presents

Interesting Stuff

HTML 5 Experiments

I recently took an hour or two to experiment with some cool new HTML5 / CSS3 techniques. For the first experiment I wanted to mess with CSS3 3D transforms so I quickly made a little cube demo. Its incredibly quick and easy to start adding depth to your HTML elements.

Experiment 1: 3D Cube

You can view the final results here .

Here is the markup:

<div id="cube-container">
    <div id="cube" class=''>
        <div id='side1' class=' face front'>Box 1</div>

        <div id='side2' class=' face right'>Box 2</div>

        <div id='side3' class='face back'>Box 3</div>  

        <div id='side3' class='face left'>Box 4</div>  
    </div>
</div>

Now we need to add a little perspective

#cube-container     {        
    -webkit-perspective:800;
    position:absolute;
    width:400px;
    height:400px;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-200px;
    border:2px dashed #000;
    }    

The most important line here is the -webkit-perspective:800. This line is what gives the child elements the illusion of depth on the screen. If this value is too small there will be too little foreshortening and our 3D effect will appear very flat, if the value is too high there will be too much foreshortening. It is probably worth noting that the center of the effect is the center of the element #cube-container, we could move the center by specifying -webkit-perspective-origin.

Now we need to set preserve-3d

#cube     {        
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 2s ease-out;
    position:relative;
    }    

Here we are setting the -webkit-transform-style to preserve-3d, this will make the child elements live in the shared 3D space as the parent. The default value for this setting is flat, which will flatten all the child objects onto the plane of the parent. We also add a -webkit-transition which is used to animate the shape later on.

Now just transform the faces to the proper positions

#cube .front     {        
    -webkit-transform: translateZ(130px);
    }    

#cube .back     {        
    -webkit-transform: rotateY(180deg) translateZ(130px);
    }    

#cube .right     {        
    -webkit-transform: rotateY(90deg) translateZ(130px);
    }    

#cube .left     {        
    -webkit-transform: rotateY(270deg) translateZ(130px);
    }    

That's pretty much it. We now have our nice little cube, if we want to animate it we just need a couple of lines of JavaScript.

var rot = 0;

document.querySelector('#next').onclick = function()     {        
    rot-=90;
    document.querySelector('#cube').style.webkitTransform = "rotateY(" + rot + "deg)";
    }    

document.querySelector('#prev').onclick = function()     {        
    rot+=90;
    document.querySelector('#cube').style.webkitTransform = "rotateY(" + rot + "deg)";
    }    

One thing that might be interesting to note is that the above JavaScript doesn't rely on jQuery, but I still used a jQuery style selector. The document.querySelector method is a new feature in JavaScript, it only works in newer browsers and I have no idea about IE, but for simple tasks like this it means I can save on including the entire jQuery library.

Experiment 2: Transitions

You can view the final results here .

This experiment was all about using only CSS and as minimal JS as possible to do some cool animations. There are several nice things about relying on CSS to do your animations, but probably the most important is that it allows your animations to be accelerated and controlled by the browser. This may not matter as much on powerful desktop systems, but as more and more browsing is done on mobile devices this becomes increasingly important. CSS even gives you the ability to add keyframes for your animation so you are able to get very accurate control of how your animation is displayed. Here is an example of a very simple keyframe used in the tile drop effect.

@-webkit-keyframes incoming-tile-drop     {        
    0%         {            
        -webkit-transform: translateY(-378px);
        opacity:0;
            }        
    50%         {            
        -webkit-transform: translateY(-378px);
        opacity:0;
            }        

    80%         {            
        opacity:1;
            }        

    100%         {            
        -webkit-transform: translateY(0%);
            }        
    }    

You can see we are animating over several different CSS properties, both -webkit-transform and opacity, we specify what it should look like at a few key points and the browser fills in all the rest.

Hope you found this useful, all the code is available out on GitHub so please checkout the examples and the code, and if you have any fun HTML 5 experiments you would like to add fork the project on GitHub and send us a pull request. Stay tuned for our next article about how to build a continuous integration VM including Jenkins, Redmine, and Gerrit.

Links

blog comments powered by Disqus