Cross browser way to rotate image using CSS?

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!


CSS to rotate by 45 degrees:

    width: 50%;
    height: 400px;
    margin: 5em auto;
    border: solid 1px #000;
    overflow: visible;
.desk img
    /* Firefox */
    /* Safari and Chrome */
    /* Opera */
    /* IE9 */
    /* 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

Need Your Help

Is this the correct layout to detect iBeacons with AltBeacon's Android Beacon Library?

ibeacon-android altbeacon

I have successfully modified the reference implementation app of the Android Beacon Library using the following beacon layout, so that it detects an iBeacon device that I have at hand:

How to simulate a mouse click using JavaScript?

javascript javascript-events

I know about the method. However, I'd like to know how to simulate the onclick event.