thebeebs | How to Rotate a video using CSS3
Learn the art of website security

How to Rotate a video using CSS3

by thebeebs 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.


Step 1

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

<style> #mVideo { -webkit-transform: rotate(5deg); -mozilla-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform-origin: bottom left; -mozilla-transform-origin: bottom left; -ms-transform-origin: bottom left; } </style>


Step 2

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="" type="video/ogg" /> <source src="" type="video/mp4" /> This is fallback text to display if the browser does not support the video element. </video>


Comments (1) -

Will Parker
Will Parker United States
11/9/2010 10:04:46 AM #

Both versions of the demo work fine in Safari 5.0.1, but both videos have a noticeable stair-step artifact on the edges. You might consider superimposing a rotated border effect to create a frame and hiding the stair-step.

Pingbacks and trackbacks (2)+

Comments are closed