Question

I designed a website for a client, and built it for them. It’s almost complete (well it’s complete if you look at it using Chrome or Firefox).

Part of the design shows a sort of polaroid photo at the top left of the screen at an angle. It’s made up of a Div and an image. The code at the moment makes the div tilt at an angle, while the image inside changes.

However, the code used:

transform: rotate(-7deg);
-webkit-transform: rotate(-7deg); /* Safari and Chrome */
-o-transform: rotate(-7deg); /* Opera */
-moz-transform: rotate(-7deg); /* Firefox */

Doesn’t work in any version of Internet Explorer. The client though uses Internet Explorer, and is giving me a load of grief because they really want it to look like this. (This client by the way, is the typical “form over function” type of person).

What could I do to make the div tilt at an angle?

EDIT:

I’ve used the CssSandpaper plugin, and it’s doing what I need it to do, up to a point.

You can see here that the image is titled as I need it to be. However, with the cycle plugin I’m using, when the image changes it dissapears, and then it reppears. I don’t know what’s causing it though?

Answer 1

IE8 & below is not support rotate property. So, for this you have to use IE filter called matrixfilter

try this :

/* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514761, M21=-0.12186934340514761, M22=0.992546151641322, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.992546151641322,
            M12=0.12186934340514761,
            M21=-0.12186934340514761,
            M22=0.992546151641322,
            SizingMethod='auto expand');

& you can generate the filter from here:

http://www.useragentman.com/IETransformsTranslator/index.html