¿Cómo voltear la imagen de fondo usando CSS?


224

¿Cómo voltear cualquier imagen de fondo usando CSS? ¿Es posible?

Actualmente estoy usando esta imagen de flecha en una background-imagede lien CSS

ingrese la descripción de la imagen aquí

Encendido: visitednecesito voltear esta flecha horizontalmente. Puedo hacer esto para hacer otra imagen de flecha PERO Tengo curiosidad por saber si es posible voltear la imagen en CSS para:visited


3
¡buena pregunta! Esto podría ser útil en muchos casos diferentes.
AshBrad

@AshBrad - Gracias por los comentarios. sí, podría ser útil en muchas condiciones
Jitendra Vyas

Respuestas:


234

Puedes voltearlo horizontalmente con CSS ...

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle .

Si quieres voltear verticalmente en su lugar ...

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Fuente .


1
Si solo estoy considerando los navegadores web-kit, ¿entonces solo -webkit-transform: scaleX(-1);es suficiente?
Jitendra Vyas

@Jitendra Debería ser, más la propiedad prefijada de no proveedor.
alex

25
@alex: un problema en esto. también está volteando el texto que está dentro <a>y solo quiero voltear la imagen de fondo. El código que das es voltear todo el elemento
Jitendra Vyas

3
@Jitendra No parece que puedas voltear la imagen de fondo. spanSin embargo, puede colocar el icono en ay luego voltearlo.
alex

1
@alex - OK, si uso este código, <li><a href="#"><span>text</span></a></li>también está volteando el texto, por lo que será lo opuesto a su código de donación para desplegar el texto y poder escribir el código de despliegue li a span { }en CSS
Jitendra Vyas

86

Encontré la manera de voltear solo el elemento de fondo no completo después de ver una pista para voltear la respuesta de Alex. Gracias alex por tu respuesta

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

Ver ejemplo aquí http://jsfiddle.net/qngrf/807/


77
@Jitendra ¿Puede verificar la URL de Jsfiddle? Creo que no tiene el mismo código que publicaste en tu respuesta + no funciona ...
sachinjain024

3
¿El código jsfiddle que publicas está cambiando el texto? ¿Es lo que quieres, o simplemente imagen de fondo?
Mandza

1
su jsfiddle no es el mismo que el código, ¿puede actualizarlo?
Royi Namir

1
@JitendraVyas hola desde 2016! Estaba considerando sugerir una edición para corregir la URL jsfiddle, ya que todavía se vincula a un código diferente al que está en su respuesta aquí: ¿le importa editar la publicación o eliminar el enlace? Gracias :)
totallyNotLizards

-webkit-transform:scaleX(-1);para Chrome
Wesley Smith

19

De acuerdo con w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

La propiedad de transformación es compatible con Internet Explorer 10, Firefox y Opera. Internet Explorer 9 admite una propiedad alternativa, -ms-transform (solo transformaciones 2D). Safari y Chrome admiten una alternativa, la propiedad -webkit-transform (transformaciones 3D y 2D). Opera solo admite transformaciones 2D.

Esta es una transformación 2D, por lo que debería funcionar, con los prefijos del proveedor, en Chrome, Firefox, Opera, Safari e IE9 +.

Otras respuestas utilizadas: antes de evitar que voltee el contenido interno. Usé esto en mi pie de página (para reflejar verticalmente la imagen de mi encabezado):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

Entonces terminas volteando el elemento y volviendo a voltear todos sus elementos secundarios. También funciona con elementos anidados.


1
¡Gracias por la respuesta! Este funcionó mejor para mí, ya que los otros voltearon a todos los niños también o requirieron un truco más complejo para revertir el cambio.
Austin Salgat

Si esta respuesta voltea todo dentro de su elemento objetivo, simplemente empújelo hacia otro elemento. En otras palabras, envuelva el contenido que no desea que se voltee dentro de un nuevo elemento <div>.
Onosa


5

Puedes voltear tanto vertical como horizontal al mismo tiempo

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

Y con la propiedad de transición puedes obtener un giro genial

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

En realidad, voltea todo el elemento, no solo elbackground-image

RETAZO

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}
#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -webkit-transition:transform .4s ease-out 0ms;
  -moz-transition:transform .4s ease-out 0ms;
  -o-transition:transform .4s ease-out 0ms;
  transition:transform .4s ease-out 0ms;
  transition-property:transform;
  transition-duration:.4s;
  transition-timing-function:ease-out;
  transition-delay:0ms;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}
<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>


El "giro vertical y horizontal al mismo tiempo" tiene el mismo efecto que girar la imagen 180 grados, funciona bien y es lo que estaba buscando,
Stonecrusher
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.