8. November 2010 03:30
Earlier I showed you how to rotate a video using HTML5. It is a little complicated so luckily you can achieve the same effect using a CSS3 2d transform.
You will be able to see the effect in IE9 Platform Preview (but not the beta), chrome, safari and firefox.
You can see a demo here.
Add the style tag to the head section of your browser. You will need to add the proprietary syntax for each of the browser vendors.
You can find out more about the transform and transform-origin property over at W3C
-webkit-transform-origin: bottom left;
-mozilla-transform-origin: bottom left;
-ms-transform-origin: bottom left;
Add the video element making sure to use the same id as we declared in the CSS which was #mVideo.
<video autobuffer="true" id="mVideo" width="640" height="360" controls="controls">
<source src="http://www.thewayithink.co.uk/html5/yoyo.ogv" type="video/ogg" />
<source src="http://www.thewayithink.co.uk/html5/yoyo.mp4" type="video/mp4" />
This is fallback text to display if the browser does not support the video element.