如何使用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>