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 CSS3 3D transformations. It shows a rotating video in Google 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'll 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 header and then the appropriate code is written to the page using the document.write() function. The video is a WebM video and as such it currently (June 2013) only plays in Google Chrome. Other browsers will see a bar chart.

<p style="text-align: center">
    <script>
        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" />');
        }
    </script>
</p>

On the video element the controls attribute shows the control buttons (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 JavaScript play/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 3D transformations to your own elements with both script and 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 can use CSS (eg in a typical CSS file) to do it.

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

Demo page

For a simple straight-forward page that doesn't have the RGraph website elements incorporated there is this demo: bar-html5-3d-transformations.html

Related links