Rotating in IE 9

HTML & CSS
1

I’m using the following CSS to rotate a bunch of images:

-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=-.04);

It’s working OK in each browser (although Opera is not very smooth) except for IE 9 which has a black rectangle behind each image. I tried adding background-color: transparent but it hasn’t made any different - can anyone help. thanks.

2

Are you using transparent images? I believe IE has a problem with multiple filters and transparent images that may be related to this issue. Have you tried adding a solid colour behind the image instead of transparent (unless of course you need the transparency).

3

The images are just photographs so there’s no transparent areas. And I tried a coloured background and that didn’t work either

4

I think you may be trying to get the filter to do more than it can.

Possible Values

iRotation 	Integer that specifies or receives one of the following values:

0
    Default. Content is not rotated.
1
    Content is rotated 90 degrees.
2
    Content is rotated 180 degrees.
3
    Content is rotated 270 degrees.
5

Thank you Mittineague. You’re right. Way too much to expect from IE.

6

Sorry I didn’t look at your code closely enough and assumed you were using the matrix transformation filter which can rotate at will. You can see examples of it in action here. It seems like too much work to me though :slight_smile:

7