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

Question

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

currenty我在CSS

使用该箭头图像中的一个libackground-image：visited我需要水平翻转这个箭头。我能做到这一点，使箭头但的另一个形象，我只是好奇，想知道是否有可能在翻转的CSS图像:visited

Answer 1

我发现我的方式只看到一个线索翻转亚历克斯的答案后，只翻转背景不是整个元素。感谢亚历克斯你的答案

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 2

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

Source。

Answer 3

对于什么是值得例如，对于基于Gecko的浏览器，你不能调节这个东西由于导致隐私泄漏，因此关闭了:visited。见http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Answer 4

据W3Schools的：在Internet Explorer 10，火狐和Opera支持 http://www.w3schools.com/cssref/css3_pr_transform.asp

变换属性。 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); 
} 

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

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(){ 
 
\t var myDiv = document.getElementById('myDiv'); 
 
\t if (myDiv.className == 'myFlipedDiv'){ 
 
\t \t myDiv.className = ''; 
 
\t }else{ 
 
\t \t myDiv.className = 'myFlipedDiv'; 
 
\t } 
 
}

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