CSS를 사용하여 배경 이미지를 뒤집는 방법? 가능합니까?
현재 CSS background-image
의 화살표 이미지를 사용하고 있습니다.li
켜기 : 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";
}
jsFiddle .
대신 세로로 뒤집기를 원한다면 …
a:visited {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
소스 .
답변
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/
답변
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 +에서 작동합니다.
내부 답변을 뒤집기 전에 다른 답변을 사용하십시오. 나는 바닥 글에서 이것을 사용했다 (헤더에서 이미지를 수직으로 거울로 돌리기 위해) :
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);
그리고으로 전환 특성 당신은 멋진 플립를 얻을 수 있습니다
-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>