CSSを使用して背景画像を反転する方法出来ますか?
現在、CSSのli
のbackground-image
でこの矢印画像を使用しています
On:visited
この矢印を水平に反転する必要があります。矢印の別の画像を作るためにこれを行うことができますBUT私は:visited
のためにCSSで画像を反転することが可能であることを知りたいだけです
私は、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/
あなたは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";
}
出典 。
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>© 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);
}
それで、あなたは要素をひっくり返して、そしてそのすべての子を再びひっくり返すことになってしまいます。入れ子になった要素でも動作します。
Geckoベースのブラウザでは、その価値があるので、結果として生じるプライバシーの漏洩のため、:visited
からこのことを除外することはできません。 http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ を参照してください。
あなたは垂直と水平の両方を反転することができます同時に
-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>