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

How to flip background image using CSS?

提问by Jitendra Vyas

How to flip any background image using CSS? Is it possible?

如何使用 CSS 翻转任何​​背景图像？是否可以？

currenty I'm using this arrow image in a background-imageof liin css

currenty我使用这个箭头图像中background-image的liCSS中

On :visitedI need to flip this arrow horizontally. I can do this to make another image of arrow BUTI'm just curious to know is it possible to flip the image in CSS for :visited

On ：visited我需要水平翻转这个箭头。我可以这样做来制作另一个箭头图像但我只是想知道是否可以在 CSS 中翻转图像:visited

采纳答案by Jitendra Vyas

I found I way to flip only the background not whole element after seeing a clue to flip in Alex's answer. Thanks alex for your answer

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

HTML

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

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

See example here http://jsfiddle.net/qngrf/807/

请参阅此处的示例http://jsfiddle.net/qngrf/807/

回答by alex

You can flip it horizontally with CSS...

您可以使用 CSS 水平翻转它...

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

jsFiddle.

js小提琴。

If you want to flip vertically instead...

如果你想垂直翻转...

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

Source.

来源。

回答by jdforsythe

According to w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

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

The transform property is supported in Internet Explorer 10, Firefox, and Opera. Internet Explorer 9 supports an alternative, the -ms-transform property (2D transforms only). Safari and Chrome support an alternative, the -webkit-transform property (3D and 2D transforms). Opera supports 2D transforms only.

Internet Explorer 10、Firefox 和 Opera 支持 transform 属性。Internet Explorer 9 支持替代属性 -ms-transform 属性（仅限 2D 转换）。Safari 和 Chrome 支持另一种选择，即 -webkit-transform 属性（3D 和 2D 转换）。Opera 仅支持 2D 转换。

This is a 2D transform, so it should work, with the vendor prefixes, on Chrome, Firefox, Opera, Safari, and IE9+.

这是一个 2D 转换，因此它应该可以使用供应商前缀在 Chrome、Firefox、Opera、Safari 和 IE9+ 上工作。

Other answers used :before to stop it from flipping the inner content. I used this on my footer (to vertically-mirror the image from my header):

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

HTML:

HTML：

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

CSS:

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

So you end up flipping the element and then re-flipping all its children. Works with nested elements, too.

所以你最终翻转元素，然后重新翻转它的所有子元素。也适用于嵌套元素。

回答by Boris Zbarsky

For what it's worth, for Gecko-based browsers you can't condition this thing off of :visiteddue to the resulting privacy leaks. See http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

就其价值而言，对于基于 Gecko 的浏览器，:visited由于由此产生的隐私泄露，您无法将其排除在外。见http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistted/

回答by Fi Ras

You can flip both vertical and horizontal at the same time

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

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

And with the transitionproperty you can get a cool flip

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

Actually it flips the wholeelement, not just the background-image

实际上它翻转了整个元素，而不仅仅是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>