How to Rotate a video using CSS3


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); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform-origin: bottom left; -moz-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="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. </video>

 

Comments (4)

  1. Mark says:

    It should be -moz-, not-mozilla-. This fails in Fx then.

  2. thebeebs says:

    Good catch 🙂 I've updated the code.

  3. Cr@ZyBoY says:

    If you add -o-transform: rotate(5deg); and -o-transform-origin: bottom left; it will work in Opera as well.

  4. thebeebs says:

    Great Point! I forgot about poor old opera. Any other browsers I have missed?

Skip to main content