How to create an inclined (not levelled) slideshow?

Question

Hi, is there a way to create an image slideshow that is rotated by say 5° ? I'd prefer a non-flash solution. Thank you!

Answer 1

You'll be able to use this with CSS transformations, but it won't work in all browsers.

Edit: Here's a solution that purports to work cross-browser.

Answer 2

CSS3 has a rotate property which you can set. In your stylesheet, it would look something like this:

#mydiv {
    transform: rotate(45deg);
}

However, it's quite new and it's got fairly limited browser support at the moment, so it's not ideal.

Some browsers support it using vendor prefixes, which means it's experimental, but you could include them in your stylesheet anyway.

Microsoft Internet Explorer has a completely different mechanism for rotation.

Your final stylesheet might look something like this:

#mydiv {
    -ms-transform: rotate(45deg); /* IE9 beta? */
    -moz-transform: rotate(45deg);  /* FF3.5+ */
    -o-transform: rotate(45deg);  /* Opera 10.5 */
    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
    transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
    filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

(You'll need to work out the angles yourself for IE! the one I've provided should be okay for 45 degrees)

However, even then you can't be certain that the user's browser will support it, and there may be other quirks you'd need to deal with.

Also, of course, a rotated element will be degraded in quality due to pixellisation on screen. How badly will depend on the quality of the browser's rotation algorithms, but there will always be some loss of quality.

In short, rotation in a browser (for the time being at least) is more of a play-thing than a useful piece of functionality. But it can be done.