CSS를 사용하여 배경 이미지를 뒤집는 방법은 무엇입니까?

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

출처.

저는 알렉스의 대답을 뒤집을 수 있는 단서를 보고 완전한 요소가 아닌 배경만 뒤집을 수 있는 방법을 찾았습니다.알렉스의 답변에 감사드립니다.

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(https://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/

w3 웹사이트에 따르면: 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>&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);
}

결국 요소를 뒤집고 모든 요소의 아이들을 뒤집습니다.중첩된 요소와도 작동합니다.

게코 기반 브라우저의 경우 이를 조건화할 수 없습니다.: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>

언급URL : https://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css