An example of CSS3 3D transformations | RGraph

An example of CSS3 3D transformations

Written by Richard Heyes, on 12th June 2013

This page shows you how you can use 3D transformations. It shows a rotating video in Chrome and a rotating chart in other browsers.

This is a demo of the new HTML5/CSS3 3D transforms. You can apply these transformations to any element - here it is applied to a bar chart (a canvas element) in most browsers and a video element in Google Chrome. The video is a WebM video - which is currently only supported by Google Chrome.

Browser support

CSS3 3D transformations are a newer addition and as such you will need to be using a relatively modern browser to see the 3D transformation. Supported browsers are:

The HTML code

The HTML that's required to show the video/canvas element is determined via a check on the useragent and then the appropriate code is written to the page using document.write. The video is a WebM video and as such it currently (June 2013) only plays in Google Chrome. Other browser will see a bar chart.

<p style="text-align: center">
        if (navigator.userAgent.indexOf('Chrome') > -1) {
            document.write('<video id="myVideo" src="/video.webm" controls autoplay loop ></video>');
        } else {
            document.write('<img id="myVideo" src="/images/logo.png" />');

On the video element the controls attribute shows controls (eg stop, play etc). The autoplay attribute starts the video playing when the page is loaded. And the loop attribute makes the video loop (ie start again when finished).

The current rotation

X angle:
Y angle:
Z angle:

These text form inputs are readouts of the current transformation angles and the checkboxes enable or disable the rotation for each of the x,y and z angles.

Controlling the video (Google Chrome)

If you're using Google Chrome then you'll be seeing the video - not the chart. In that case you can use these buttons to control the video. When pressed the buttons call the JavaScriptplay/pause functions of the video element.

<button onclick="document.getElementById('myElement').play()">Play</button>
<button onclick="document.getElementById('myElement').pause()">Pause</button>

Example code

Here is a quick example of how you can apply the 3D transformations to your own elements with both script and also CSS. The first example of code shows you how you can use JavaScript to set the relevant CSS values and the second shows how you could use CSS (eg in a typical CSS file) to do it.

    myElement = document.getElementById('myElement');
    // This code applies the 3D transformation to webkit based browsers (eg Chrome, Safari, Opera 15) = 'rotate3d(1, 1, 1, 45deg)';
    // This applies the transformation to other browsers (eg FF, MSIE) = 'rotate3d(1, 1, 1, 45deg)';
    -webkit-transform: rotate3d(1, 1, 1, 45deg);
    transform: rotate3d(1, 1, 1, 45deg);

Demo page

For a simple straight-forward page that doesn't have the RGraph website elements incorporated there is this page (which is also included in the RGraph archive): demos/bar-html5-3d-transformations.html

Related links