¿Manera cruzada del navegador para girar la imagen usando CSS?

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.¿Manera cruzada del navegador para girar la imagen usando CSS?

Este es 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 vez de hacer cuatro esquinas imágenes individuales, lo que me gustaría hacer (si es posible) es usar la imagen original (corner.png) y rotarlo usando CSS.

¿Hay una forma compatible con el navegador cruzado de hacer esto?

¡Muchas gracias!

Fuente

2012-08-06 Cynthia

Una búsqueda en Google te habría dado su respuesta: http: // respuestas .oreilly.com/topic/1004-how-to-rotate-an-image-with-css/ – xbonez

Primero busqué en google. Ese enlace no apareció en ninguna de las primeras 10 * páginas * de resultados que miré (el término de búsqueda era "css rotate image"). Como muchos de los ejemplos que * * * * * * * vi no eran compatibles con navegador cruzado, vine aquí. Thx para el enlace sin embargo. – Cynthia

Será mejor que use 4 imágenes diferentes ya que las transformaciones CSS no funcionarán en IE 7 e IE 8. –

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

CSS para rotar 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í: CSS rotate property in IE

Fuente

2012-08-06 16:46:15

¡Funciona muy bien con imágenes que no tienen elementos transparentes en ellas! Gracias :) Hago esa distinción solo porque revisé el jfiddle en IE8 y estaba jugando al infierno con la sombra y la transparencia. Eso es IE para ti sin embargo. ¡Gracias de nuevo! – Cynthia

Esta es exactamente la razón por la que CSS apesta. La falta de estándares es el estándar. – janek37

@ janek37 falta y explícitamente en este caso NO HAY estándar. Sería bueno tener un 'estándar' rotar (45deg); 'como un banner para todos los específicos del navegador. – 23inhouse

¿Manera cruzada del navegador para girar la imagen usando CSS?

Respuesta

Cuestiones relacionadas