A rotating video/Bar chart using CSS3 3D transformations

Use Google Chrome to see the video (a WebM video). There's also an example of 3D transforms on this page.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    /**
    * If the browser is Chrome the element that spins is a WebM video. If not then it's an RGraph Bar chart.
    */
    if (RGraph.ISCHROME) {
        document.write('<video id="myElement" src="../video/video.webm" controls autoplay loop ></video>');
    } else {
        document.write('<canvas id="myElement" width="600" height="250">[No canvas support]</canvas>');
        
        var bar = new RGraph.Bar({
            id: 'myElement',
            data: [4,8,6,8,7],
            options: {
                labels: ['John','Fred','George','Paul','Ringo']
            }
        }).draw();
    }




    /**
    * Initially the x/y/z angles are all zero
    */
    x = 0;
    y = 0;
    z = 0;




    /**
    * This is the spin function that gets called repeatedly and sets the appropriate CSS3 values.
    * It calls itself again at the end after a small delay.
    */
    mySpinFunc = function ()
    {
        /**
        * Set the appropriate CSS3 properties for WebKit browsers
        */
        document.getElementById("myElement").style.WebkitTransform = 'rotate3d(1,0,0, ' + x + 'deg) rotate3d(0,1,0, ' + y + 'deg) rotate3d(0,0,1, ' + z + 'deg)';
        
        /**
        * Set the unprefixed CSS3 properties (for Firefox, MSIE 10 etc)
        */
        document.getElementById("myElement").style.transform = 'rotate3d(1,0,0, ' + x + 'deg) rotate3d(0,1,0, ' + y + 'deg) rotate3d(0,0,1, ' + z + 'deg)';

        /**
        * Increment the X/Y/Z angles
        */
        x += 3;
        y += 3;
        z += 3;

        /**
        * Call ourselves again after a small delay
        */
        setTimeout(mySpinFunc, 50);
    }
    
    mySpinFunc();
</script>

Share on Facebook Share on Twitter

« Back