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

如何翻转任何使用CSS的背景图片？ 可能吗？

目前我在css中使用这个箭头图像的background-image

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

看到一个线索在Alex的答案中翻转后，我发现我的方式只翻转背景而不是整个元素。 感谢alex的答复

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/

Answer 3

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

Internet Explorer 10，Firefox和Opera支持transform属性。 Internet Explorer 9支持另一种-ms-transform属性（仅限2D转换）。 Safari和Chrome支持替代的-webkit转换属性（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); } 

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

Answer 4

对于基于Gecko的浏览器来说，值得一提的是，由于隐私泄漏，您无法将这件事情排除在外。 见http://hacks.mozilla.org/2010/03/privacy-related-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); 

与过渡财产，你可以得到一个很酷的翻转

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