CSS를 사용하여 텍스트를 미러링 / 플립 할 수 있습니까?

CSS / CSS3를 사용하여 텍스트를 미러링 할 수 있습니까?

구체적으로,이 가위 문자“✂”( ✂)가 있는데, 왼쪽이 아닌 오른쪽을 가리키는 것으로 표시하고 싶습니다.

이를 위해 CSS 변환을 사용할 수 있습니다. 수평 플립은 다음과 같이 div 스케일링을 포함합니다.

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

그리고 수직 뒤집기는 div를 다음과 같이 스케일링하는 것을 포함합니다.

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

데모:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

두 개의 매개 변수는 X 축과 Y 축, -1은 미러이지만 필요에 따라 원하는 크기로 조정할 수 있습니다. 거꾸로되어 있습니다 (-1, -1).

2011 년에 크로스 브라우저 지원에 사용 가능한 최상의 옵션에 관심이 있으시면 이전 답변을 참조하십시오 .

실제 거울 :

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

당신은 사용자 중 하나를 사용할 수 있습니다

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

또는

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

공지 사항 해당 설정을 position하는 것은 absolute매우 중요합니다! 설정하지 않으면 설정해야합니다. display: inline-block;

나는 인터넷을 포함 하여이 솔루션을 함께 모았습니다.

• 스택 오버플로 답변,
• MSDN 기사,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ 및
• http://www.useragentman.com/IETransformsTranslator/ .

이 솔루션은 IE6 +를 포함한 모든 브라우저에서 scale(-1,1)(적절한 미러)와 필요한 경우 적절한 filter/ -ms-filter속성 (IE6-8)을 사용하여 작동하는 것 같습니다 .

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

크로스 브라우저 호환성을 위해이 클래스를 작성하십시오.

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

아이콘 클래스에 추가하십시오.

<i class="icon-search mirror-icon"></i>

왼쪽에 손잡이가있는 검색 아이콘을 얻으려면

이를 위해 '변형'을 사용할 수 있습니다. http://jsfiddle.net/aRcQ8/

CSS :

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

rotateY실제 미러 미러 도 있습니다 .

transform: rotateY(180deg);

아마도 더 명확하고 이해할 수있는 것입니다.

편집 : 오페라에서 작동하지 않는 것 같습니다 ... 슬프게도. 그러나 Firefox에서는 제대로 작동합니다. 우리가 translate3d아마도 어떤 종류의 일을하고 있다고 암묵적으로 말해야 할 것 같습니까? 아니면 그런 것.

수평 및 수직 미러 플립에 대한 실무 데모를 추가하기 만하면됩니다.

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

이것은 나를 위해 일한 것입니다 <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

인라인 블록 또는 회전하려면 표시가 필요합니다. 기본적으로 첫 번째 대답은 좋습니다. 그러나 -180은 효과가 없었습니다.

상자 반사를 시도 할 수 있습니다

box-reflect: 20px right;

CSS 속성 상자 반영 호환성을 참조하십시오 ? 상세 사항은

캐릭터를 뒤집는 방법에 대한 예를 하나 더 들겠습니다. 필요한 경우 공급 업체 접두사를 추가하지만 현재 모든 최신 브라우저는 접두사가없는 변환 속성을 지원합니다. Opera Mini 모드가 활성화 된 경우 (세계 사용자의 ~ 3 %) Opera 만 예외입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

direction: rtl; 아마 당신이 찾고있는 것입니다.

's7 획 아이콘' 및 'font-awesome' 과 같은 글꼴 아이콘에서 제대로 작동합니다 .

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

그런 다음 대상 요소에서 :

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>