Como inverter a imagem de fundo usando CSS?

224

Como inverter qualquer imagem de fundo usando CSS? É possível?

Atualmente estou usando esta imagem de seta em um background-imagede liem css

insira a descrição da imagem aqui

Ativado: visitedpreciso girar essa seta horizontalmente. Posso fazer isso para criar outra imagem da seta, mas estou curioso para saber se é possível inverter a imagem em CSS para:visited

Jitendra Vyas
fonte
3
boa pergunta! isso pode ser útil em vários casos diferentes.
AshBrad 23/03
@ Ashshad - Obrigado por comentários. sim que pode ser útil em muitas condições
Jitendra Vyas

Respostas:

234

Você pode girá-lo horizontalmente com CSS ...

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

jsFiddle .

Se você quiser virar verticalmente ...

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

Fonte .

alex
fonte
1
Se eu estou pensando apenas em navegadores de kit da Web, então -webkit-transform: scaleX(-1);é suficiente?
Jitendra Vyas
@Jitendra Deveria ser, mais a propriedade prefixada não do fornecedor.
24411 alex
25
@alex - um problema nisso. está lançando o texto também que está dentro do <a>e só quero inverter a imagem de fundo. O código que você dá é para virar todo o elemento
Jitendra Vyas
3
@Jitendra Não parece que você pode simplesmente virar a imagem de fundo. Você pode colocar o ícone em um spane, em seguida, invertê-lo.
24411 alex
1
@alex - OK a se eu usar este código <li><a href="#"><span>text</span></a></li>está lançando o texto também, então o que vai ser o oposto de seu código de dar a unflip o texto para que eu possa escrever código unflip para li a span { }em css
Jitendra Vyas
86

Eu encontrei uma maneira de virar apenas o fundo, não todo o elemento, depois de ver uma pista para virar a resposta de Alex. Obrigado alex pela sua resposta

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

Veja o exemplo aqui http://jsfiddle.net/qngrf/807/

Jitendra Vyas
fonte
7
@Jitendra Você pode verificar o URL do Jsfiddle. Eu acho que não está tendo o mesmo código que você postou em sua resposta + não o seu trabalho ..
sachinjain024
3
O código jsfiddle para o qual você posta está invertendo o texto? é isso que você quer, ou apenas imagem de fundo?
mandza 11/09/14
1
seu jsfiddle não é o mesmo que o código, você pode atualizá-lo?
Royi Namir 07/06
1
@JitendraVyas hello from 2016! Eu estava pensando em sugerir uma edição para corrigir o URL do jsfiddle, pois ele ainda está vinculado a um código diferente do que está na sua resposta aqui - cuidado para editar a postagem ou remover o link? Obrigado :)
totallyNotLizards
-webkit-transform:scaleX(-1);para chrome
Wesley Smith
19

De acordo com a w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

A propriedade de transformação é suportada no Internet Explorer 10, Firefox e Opera. O Internet Explorer 9 oferece suporte a uma propriedade alternativa, -ms-transform (somente transformações em 2D). O Safari e o Chrome oferecem suporte a uma propriedade alternativa, -webkit-transform (transformações 3D e 2D). O Opera suporta apenas transformações 2D.

Como é uma transformação 2D, deve funcionar com os prefixos do fornecedor no Chrome, Firefox, Opera, Safari e IE9 +.

Outras respostas usadas: antes de impedir que ele inverta o conteúdo interno. Usei isso no rodapé (para espelhar verticalmente a imagem do meu cabeçalho):

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

Então você acaba invertendo o elemento e depois invertendo todos os seus filhos. Também trabalha com elementos aninhados.

jdforsythe
fonte
1
Obrigado pela resposta! Este funcionou melhor para mim, já que os outros também mudaram todas as crianças ou exigiram um truque mais complexo para reverter o movimento.
Austin Salgat
Se essa resposta inverter tudo o que estiver dentro do elemento segmentado, basta empurrá-lo para outro elemento. Em outras palavras, envolva o conteúdo que você não deseja que seja invertido dentro de um novo elemento <div>.
Onosa 25/10
5

Você pode virar vertical e horizontal ao mesmo tempo

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

E com a propriedade de transição , você pode obter um flip legal

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

Na verdade, ele inverte todo o elemento, não apenas obackground-image

SNIPPET

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>

Fi Ras
fonte
O "flip vertical e horizontal ao mesmo tempo" tem o mesmo efeito de transformar a imagem em 180 graus, funciona bem e é o que eu estava procurando,
Stonecrusher