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

225

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

В настоящее время я использую это изображение стрелки в background-imageо liв CSS

введите описание изображения здесь

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

Джитендра Вьяс
источник
3
хороший вопрос! это может пригодиться во многих различных случаях.
AshBrad
@AshBrad - Спасибо за комментарии. да, это может быть полезно во многих условиях
Jitendra Vyas

Ответы:

235

Вы можете перевернуть его горизонтально с помощью 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";
}

Источник .

Алекс
источник
1
Если я рассматриваю только браузеры Web-kit, то -webkit-transform: scaleX(-1);достаточно ли этого?
Джитендра Вьяс
@Jitendra Должно быть, плюс свойство с префиксом не вендора.
Алекс
25
@alex - одна проблема в этом. это также переворачивает текст, который находится внутри, <a>и я хочу только перевернуть фоновое изображение. Код, который вы даете, должен перевернуть весь элемент
Jitendra Vyas,
3
@Jitendra Не похоже, что вы можете просто перевернуть фоновое изображение. Вы можете поместить значок в, spanа затем перевернуть это, однако.
Alex
1
@alex - ОК, если я использую этот код, <li><a href="#"><span>text</span></a></li>он также переворачивает текст, так что будет против вашего кода, чтобы развернуть текст, чтобы я мог написать код отката li a span { }в css
Jitendra Vyas
86

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

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/

Джитендра Вьяс
источник
7
@Jitendra Можете ли вы проверить URL Jsfiddle. Я думаю, что он не имеет тот же код, который вы опубликовали в своем ответе + он не работает ..
sachinjain024
3
Код jsfiddle, который вы публикуете, переворачивает текст? это то, что вы хотите, или просто фоновое изображение?
Мандза
1
ваш jsfiddle не совпадает с кодом, вы можете обновить его?
Рой Намир
1
@JitendraVyas привет с 2016 года! Я подумывал о том, чтобы предложить редактирование, чтобы исправить URL-адрес jsfiddle, поскольку он по-прежнему ссылается на другой код, чем в вашем ответе здесь - хотите отредактировать сообщение или удалить ссылку? Спасибо :)
totallyNotLizards
-webkit-transform:scaleX(-1);для хрома
Уэсли Смит
19

По данным 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-преобразования.

Это двумерное преобразование, поэтому оно должно работать с префиксами поставщика в 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);
}

Таким образом, вы в конечном итоге переворачиваете элемент, а затем переворачиваете все его дочерние элементы. Работает и с вложенными элементами.

jdforsythe
источник
1
Спасибо за ответ! Этот работал лучше всего для меня, так как другие либо сбрасывали всех детей, либо требовали более сложную уловку, чтобы отменить бросок.
Остин Салгат
Если этот ответ переворачивает все внутри целевого элемента, просто вставьте его в другой элемент. Другими словами, оберните содержимое, которое вы не хотите переворачивать, в новый элемент <div>.
Оноса
5

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

    -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

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
источник
«Перевернуть как по вертикали, так и по горизонтали одновременно» имеет тот же эффект, что и поворот изображения на 180 градусов, работает нормально и это то, что я искал,
Stonecrusher