¿Cómo agregar una imagen girada en CSS?

He escrito el código a continuación. Pero ahora el requisito es que la imagen se gire 180 grados. ¿Cómo puedo conseguir esto?¿Cómo agregar una imagen girada en CSS?

#cell { 
background-image: url("../images/logo.PNG"); 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: 0px 250px; 
background-color: #FFFFFF; 
border-left: 2px; 
}

etiqueta HTML:

<td width="2%" id="cell"/>

Fuente

2012-01-20 user968880

no pudiste hacer esto en un programa de manipulación de imágenes (GIMP, Photoshop, etc.) en lugar, o usted necesita tener la imagen original como lo es ahora? – Bojangles

http://stackoverflow.com/questions/1526448/rotating-an-image-using-css Esto podría ayudarlo –

Si usted no tiene ningún texto en el <td>transform: rotate(180deg); puede utilizar en él. Si tiene texto, también rotará el texto. Para evitar que pueda poner un <div> dentro del <td>, coloque el texto dentro de eso, y gírelo 180 grados (lo que lo pone de nuevo en posición vertical).

Demostración: http://jsfiddle.net/ThinkingStiff/jBHRH/

HTML:

<table> 
    <tr><td width="20%" id="cell"><div>right-side up<div></td></tr> 
</table>

CSS:

#cell { 
    background-image: url(http://thinkingstiff.com/images/matt.jpg); 
    background-repeat: no-repeat; 
    background-size: contain; 
    color: white; 
    height: 150px; 
    transform: rotate(180deg); 
    width: 100px; 
} 

#cell div { 
    transform: rotate(180deg);   
}

Salida:

enter image description here

Fuente

2012-01-20 09:35:15 ThinkingStiff

Puede utilizar CSS3 para esto, pero hay algunos problemas con el navegador:

transform: rotate(180deg);

También busque aquí: CSS3 rotate alternative?

Fuente

2012-01-20 09:35:34

Una solución multi-navegador es

#cell { 
    -webkit-transform: rotate(180deg);  /* Chrome and other webkit browsers */ 
    -moz-transform: rotate(180deg);  /* FF */ 
    -o-transform: rotate(180deg);   /* Opera */ 
    -ms-transform: rotate(180deg);   /* IE9 */ 
    transform: rotate(180deg);    /* W3C compliant browsers */ 

    /* IE8 and below */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); 
}

Tenga en cuenta, que para IE8 y por debajo , el punto central de rotación no está ubicado en el centro de la imagen (como ocurre con todos los demás navegadores). Por lo tanto, para IE8 y versiones posteriores, debe jugar con márgenes negativos (o paddings) para desplazar la imagen hacia arriba y hacia la izquierda.

El elemento debe bloquearse. Otras unidades que pueden ser utilizados son: 180deg = .5turn = 3.14159rad = 200grad

Fuente

2012-01-20 09:35:56

Entiendo por qué estos son todos iguales: 180deg, .5turn y 3.14159rad, pero no entiendo por qué 200rad es lo mismo que el resto, ¿alguien puede explicarlo? – Kevkong

@Kevkong Disculpa, fue un error tipográfico. Quise decir '200grado'. Gracias por señalar eso –

Oh, no era mi intención señalar eso. Estaba muy interesado, pero tan pronto como escribiste "graduado", recordé mi clase de matemáticas de la escuela y un poco de Google contestó mi pregunta. – Kevkong

También puede tratar de esta rotación de tipo axial o la rotación sobre el eje Z.

.box { 
 
    background: url('http://aashish.coolpage.biz/img/about/7.jpg'); 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: transform .5s linear; 
 
    transform-style: preserve-3D; 
 
} 
 

 
.box:hover { 
 
    transform: rotateY(180deg); 
 
}

<div class="box"></div>

Fuente

2017-11-03 11:59:04 Aashish

¿Cómo agregar una imagen girada en CSS?

Respuesta

Cuestiones relacionadas