web-dev-qa-db-ja.com

CSSを使って背景画像を反転するには？

CSSを使用して背景画像を反転する方法出来ますか？

現在、CSSのliのbackground-imageでこの矢印画像を使用しています

enter image description here

On：visitedこの矢印を水平に反転する必要があります。矢印の別の画像を作るためにこれを行うことができますBUT私は:visitedのためにCSSで画像を反転することが可能であることを知りたいだけです

csscss3mobile-webkit
206
Jitendra Vyas

私は、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/

70
Jitendra Vyas

あなたは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";
}

出典 。

213
alex

W3schoolsによると、 http://www.w3schools.com/cssref/css3_pr_transform.asp です。

Transformプロパティは、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 +でベンダープレフィックスを使用して動作するはずです。

他の答えは使用されました：内部の内容を弾くのを止める前。私は自分のフッターでこれを使用しました（私のヘッダからの画像を垂直にミラーするため）：

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

それで、あなたは要素をひっくり返して、そしてそのすべての子を再びひっくり返すことになってしまいます。入れ子になった要素でも動作します。

17
jdforsythe

Geckoベースのブラウザでは、その価値があるので、結果として生じるプライバシーの漏洩のため、:visitedからこのことを除外することはできません。 http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ を参照してください。

10
Boris Zbarsky

あなたは垂直と水平の両方を反転することができます同時に

    -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だけでなくwhole要素も反転します

スニペット

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>
5
Fi Ras