Cross browser way to rotate image using CSS?

Question

I have a site layout I'm working on that has a main content area and then at each of the four corners of the content area sits a corner graphic. The overall effect is that of a desk blotter.

Here is the code for my top left hand corner:

.corner-top-left    { width:96px ; height:96px ; background:url("images/corner.png") no-repeat ; position:absolute ; top:-5px ; left:-5px ; z-index:3000 ; } 

Rather than make four individual corner images, what I would like to do (if possible) is use the original image (corner.png) and rotate it using CSS.

Is there a cross browser compatible way to do this?

Many thanks!

Answer 1

http://jsfiddle.net/tJkgP/2/

CSS to rotate by 45 degrees:

.desk {     width: 50%;     height: 400px;     margin: 5em auto;     border: solid 1px #000;     overflow: visible; } .desk img {     behavior:url(-ms-transform.htc);     /* Firefox */     -moz-transform:rotate(45deg);     /* Safari and Chrome */     -webkit-transform:rotate(45deg);     /* Opera */     -o-transform:rotate(45deg);     /* IE9 */     -ms-transform:rotate(45deg);     /* IE6,IE7 */     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);     /* IE8 */     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";   } 

IE6-8 CSS came from here: CSS rotate property in IE