una - ¿Navegación cruzada para rotar imágenes usando CSS?

rotate css

Question

Tengo un diseño de sitio en el que estoy trabajando que tiene un área de contenido principal y luego en cada una de las cuatro esquinas del área de contenido se encuentra un gráfico de esquina. El efecto general es el de un papel de escritorio.

Aquí está el código para mi esquina superior izquierda:

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

En lugar de hacer cuatro imágenes de esquina individuales, lo que me gustaría hacer (si es posible) es usar la imagen original (corner.png) y rotarla usando CSS.

¿Hay una forma compatible con navegador cruzado para hacer esto?

¡Muchas gracias!

Answer 1

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

CSS para rotar en 45 grados:

.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 vino de aquí: propiedad CSS rotar en IE