Cross browser para rotar la imagen con CSS?

Tengo un sitio de diseño en el que estoy trabajando, que tiene un área de contenido principal y, a continuación,
en cada una de las cuatro esquinas del área de contenido se sienta en una esquina de la gráfica. El
el efecto general es el de un escritorio de papel secante.

Aquí es el código de 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 esquina de las imágenes, de lo que me gustaría hacer
(si es posible) es el uso de la imagen original (en la esquina.png) y gírelo en el uso de
CSS.

Hay una cruz navegador compatible manera de hacer esto?

Muchas gracias!

  • Una búsqueda en google habría dado su respuesta: answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css
  • Hice una búsqueda de google en primer lugar. Ese enlace no aparece en ningun lugar en las 10 primeras páginas de los resultados de la miré a través de (término de búsqueda fue ‘css rotar la imagen de fondo’). Ya que muchos de los ejemplos que me hizo ver que no eran compatible con todos los navegadores, he venido aquí. Gracias por el enlace, aunque.
  • Sería mejor usar 4 diferentes imágenes como CSS transforma no funciona en IE 7 e IE 8.
  • Gracias por la advertencia, Ihor. En IE8, la rotación funcionaba de maravilla pero jugó el infierno con la transparencia de sombra de mi imagen. Gah. aparte de las imágenes es entonces 🙂
  • ¿Por qué no hacer una sola imagen que contiene las cuatro esquinas y el uso de un desplazamiento para mostrar sólo la necesaria? Veo que esta técnica se utiliza todo el tiempo.
  • el enlace está muerto ahora. 🙁

InformationsquelleAutor Cynthia | 2012-08-06

1 Kommentar

  1. 55

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

    CSS para girar 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 girar la propiedad en IE

    • Este será un gran trabajo con imágenes que no tienen elementos transparentes en ellos! Gracias 🙂 me hace esa distinción sólo porque he comprobado la jfiddle en IE8 y se fue a jugar al infierno w/ la sombra y la transparencia. Que es decir, para usted, sin embargo. Gracias de nuevo!
    • Esta es exactamente la razón por la CSS es una mierda. La falta de normas es el estándar.
    • es que carecen de forma explícita y en este caso no hay NINGÚN estándar. Sería bueno tener un estándar de rotate(45deg); como una bandera para todos los navegadores específicos.
    • Sería bueno saber de dónde viene el comportamiento de archivo htc viene de… y qué papel juega en el indicado secuencia de comandos.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea