poner - rotate background image css

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

Question

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

Actualmente estoy usando esta imagen de flecha en una background-image de background-image de li en css

Encendido: visited Necesito mover esta flecha horizontalmente. Puedo hacer esto para hacer otra imagen de flecha PERO solo tengo curiosidad de saber si es posible voltear la imagen en CSS para :visited

Answer 1

Encontré la forma de voltear solo el fondo y no el elemento 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);

    }

Vea el ejemplo aquí http://jsfiddle.net/qngrf/807/

Answer 2

Para lo que vale, para los navegadores basados ​​en Gecko no puede condicionar esto :visited debido a las fugas de privacidad resultantes. Ver http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Answer 3

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 puede obtener un cambio de imagen 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 la background-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>

Answer 4

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";
}

Source

Answer 5

Según 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 alternativa, la propiedad -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 cambie el contenido interno. Utilicé 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);
}

Así que terminas volteando el elemento y luego volviendo a voltear todos sus hijos. Funciona con elementos anidados, también.