如何使用CSS翻转背景图片？

Question

如何使用CSS翻转任何背景图像？可以吗？

当前我正在 css

 的 

background-image

 的 

li

中使用此箭头图像

开：

visited我需要水平翻转这个箭头。我可以这样做来制作另一个箭头图像但是

我只是想知道是否可以在CSS中翻转图像

:visited

Answer 1

你可以用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";
}

来源

.

Answer 2

在亚历克斯的答案中看到翻转的线索后，我发现只翻转背景而不是整个元素。谢谢亚历克斯的回答

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(https://i.sstatic.net/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/

Answer 3

根据 w3schools 的说法： http://www.w3schools.com/cssref/css3_pr_transform.asp

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+ 上使用供应商前缀。

其他答案使用 :before 来阻止它翻转内部内容。我在页脚上使用了它（垂直镜像页眉中的图像）：

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

因此，您最终会翻转该元素，然后重新翻转其所有子元素。也适用于嵌套元素。

Answer 4

无论如何，对于基于 Gecko 的浏览器，您无法将其从 

:visited 中删除，因为这会导致隐私泄露。 请参阅 http://hacks.mozilla.org/2010/03/privacy-lated-changes-coming-to-css-vistited/

Answer 5

您可以同时垂直和水平翻转

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

使用 transition 属性，您可以获得很酷的翻转

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

Answer 6

要垂直翻转背景图像，同时保持内容不变，您还可以同时翻转容器沿及其内容。

这会将内容翻转两次，再次将其正面朝上。

像这样：

div {
  background: url(https://www.w3schools.com/howto/img_paris.jpg);
  width: 400px; height: 300px;
}
div span {
  color: red;
  width: 100%; height: 100%;
  display: block;
}
div:hover,
div:hover span {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div><span>Move your mouse over this image.</span></div>

这当然也可以水平工作或同时工作。请注意，如果内部内容只是占据整个空间的单个元素，上面的代码效果最好，因为具有多个元素仍然会以这种方式改变它们的顺序。