Cross browser way to rotate image using CSS?

Viewed 56787

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!

1 Answers
Related