Кросс-браузерный способ повернуть изображение с помощью CSS?

У меня есть макет сайта, над которым я работаю, у которого есть основная область содержимого, а затем в каждом из четырех углов области содержимого находится угловая графика. общий эффект - эффект рабочего стола.

Вот код для моего верхнего левого угла:

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

Вместо того, чтобы делать четыре отдельных изображения в углу, что бы я хотел сделать (если возможно) использует исходное изображение (corner.png) и поворачивает его, используя CSS.

Существует ли совместимый с кросс-браузером способ?

Большое спасибо!

.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)"; }

Ответ 1