Javascript / CSS를 통해 HTML / 이미지를 뒤집는 브라우저 간 방법?

Javascript / CSS를 통해 HTML / 이미지를 뒤집는 브라우저 간 방법?

---

이미지를 뒤집는 라이브러리 / 간단한 방법이 있습니까?

다음과 같이 이미지 뒤집기 :

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

나는 애니메이션을 찾는 것이 아니라 그냥 이미지를 뒤집습니다.

나는 avial을 검색하지 않았고 MozillaZine에서 SVG를 사용하는 복잡한 버전 만 발견했으며 브라우저 간에서 작동 할 것이라고 확신하지 않습니다.

---

다음 CSS는 CSS 변환을 지원하는 IE 및 최신 브라우저에서 작동합니다. 나는 당신도 그것을 사용하고 싶을 경우를 대비하여 수직 플립 클래스를 포함했습니다.

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

---

많은 reflection.js 유형 라이브러리 중 하나를 살펴보세요 . 매우 간단합니다. IE에서는 'flipv'필터를 사용하고 'fliph'필터도 있습니다. 다른 브라우저 내에서 캔버스 태그를 만들고 drawImage를 사용합니다. Elijah의 대답은 아마도 동일한 브라우저를 지원할 것입니다.

---

버그를 수정하는 동안이 답변을 파헤 쳤지 만 제안 된 답변은 정확하지만 변환에 대한 모든 공급 업체 규칙을 포함하는 것과 관련된 대부분의 최신 CSS Linting 규칙을 위반하는 것으로 나타났습니다. 그러나 -ms-tranform 규칙을 포함하면 IE9에서 필터와 -ms-transform 규칙을 적용하는 이상한 버그가 발생하여 이미지가 다시 뒤집히고 뒤집 힙니다.

다음은 CSS Lint 규칙을 지원하는 개선 사항입니다.

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(1);  /* linting rule fix + IE9 fix */
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
}

---

배경 이미지 만 뒤집으려면 뒤집힌 div 내부의 내부 요소에 클래스를 사용할 수 있습니다. 기본적으로 기본 div로 내부 요소를 뒤집지 만 각 요소를 다시 뒤집습니다. 어쨌든 Firefox에서 작동합니다.

이렇게 :

<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>

참고 URL : https://stackoverflow.com/questions/1309055/cross-browser-way-to-flip-html-image-via-javascript-css