如何使用 CSS 翻转任何背景图像?是否可以?
目前我在 cssbackground-image
中使用这个箭头图像li
On :visited
我需要水平翻转这个箭头。我可以这样做来制作另一个箭头图像但我只是想知道是否可以在 CSS 中翻转图像:visited
如何使用 CSS 翻转任何背景图像?是否可以?
目前我在 cssbackground-image
中使用这个箭头图像li
On :visited
我需要水平翻转这个箭头。我可以这样做来制作另一个箭头图像但我只是想知道是否可以在 CSS 中翻转图像:visited
你可以用CSS水平翻转它...
a:visited {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
如果你想垂直翻转......
a:visited {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
来源。
在看到亚历克斯的答案翻转的线索后,我发现我只能翻转背景而不是整个元素。感谢亚历克斯的回答
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/
根据 w3schools: http ://www.w3schools.com/cssref/css3_pr_transform.asp
转换属性在 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+ 上使用供应商前缀。
使用的其他答案 :before 阻止它翻转内部内容。我在页脚上使用了它(从我的页眉垂直镜像图像):
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);
}
所以你最终会翻转元素,然后重新翻转它的所有子元素。也适用于嵌套元素。
:visited
对于它的价值,对于基于 Gecko 的浏览器,由于由此导致的隐私泄露,您无法排除此问题。请参阅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);
使用过渡属性,您可以获得很酷的翻转
-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
片段
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>