Как перевернуть фоновое изображение с помощью CSS?

как перевернуть любое фоновое изображение с помощью CSS? Возможно ли это?

currenty я использую это изображение стрелки в background-image of li в css

enter image description here

On:visited мне нужно перевернуть эту стрелку по горизонтали. Я могу сделать это, чтобы сделать еще один образ стрелки но мне просто интересно узнать, можно ли перевернуть изображение в CSS для :visited

190
css css3 mobile-webkit

5 ответов

Вы можете перевернуть его по горизонтали с помощью CSS...

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

jsFiddle.

Если вы хотите перевернуть вертикально вместо этого...

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

источник.

195

Я нашел способ перевернуть только фон не весь элемент, увидев подсказку, чтобы перевернуть ответ Алекса. Спасибо Алекс за ваш ответ

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

    }

см. пример здесь http://jsfiddle.net/qngrf/807/

62

по данным w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

свойство transform поддерживается в Internet Explorer 10, Firefox и Opera. Internet Explorer 9 поддерживает альтернативное свойство-ms-transform (только 2D-преобразования). Safari и Chrome поддерживают альтернативное свойство-webkit-transform (3D и 2D преобразования). Opera поддерживает только 2D преобразования.

Это 2D-преобразование, поэтому он должен работать с префиксами поставщиков в Chrome, Firefox, Opera, Safari и IE9+.

другие используемые ответы: прежде чем остановить его от листать внутреннее содержание. Я использовал это на своем нижнем колонтитуле (чтобы вертикально отразить изображение из моего заголовка):

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

так увлечен элемент и заново листать все его дети. Работает и с вложенными элементами.

16

для чего это стоит, для браузеров на основе Gecko вы не можете обусловить эту вещь :visited в результате утечки конфиденциальности. Смотри http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

10

вы можете перевернуть как вертикальный, так и горизонтальный в то же время

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

и переход свойство вы можете получить прохладный флип

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

на самом деле он переворачивается весь элемент, а не только background-image

фрагмент

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