CSS 만 사용하여 텍스트 뒤집기 / 반전 / 미러링

CSS 만 사용하여 텍스트 뒤집기 / 반전 / 미러링

---

인터넷 검색을했고 여기에 내 대답이 있습니다.

<!--[if IE]>
<style>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    }
</style>
<![endif]--> 
<style>
.mirror {
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);
}
</style>
<div class="mirror">testing</div>

여기서 유일한 문제는 미러링의 중심이 객체의 중심이 아니므로 객체를 원하는 위치로 이동하려면 자바 스크립트가 필요할 수 있습니다.

---

코드는 정확하지만이를 수행하는 더 쉬운 방법이 있습니다.

img.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */

  filter: FlipH;                 /* IE 6/7/8 */
}

나는 이것이 당신의 중앙 미러링 문제를 해결한다고 생각합니다.

언급했듯이 블록, 인라인 블록 등의 디스플레이를 사용하려면 요소를 설정해야합니다.

---

사용 transform: scaleX(-1);을 뒤집기 위해 미러 사용transform: scaleX(-1) rotate(180deg);

참조 URL : https://stackoverflow.com/questions/3433641/flipping-inverting-mirroring-text-using-css-only