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);

2つのパラメーターは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;

私はインターネットを精査することでこの解決策をまとめました

• Stack Overflowの回答、
• 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);

これは、おそらく、さらに明確で理解しやすいでしょう。

編集：しかし残念ながらOperaでは動作しないようです。しかし、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);

display：inline-blockまたは回転するブロックが必要です。だから基本的に最初の答えは良いです。しかし、-180は機能しませんでした。

あなたはボックスリフレクトを試すことができます

box-reflect: 20px right;

CSSプロパティbox-reflectの互換性を参照してください。詳細については

キャラクターを反転させる方法のもう1つの例です。ベンダープレフィックスが必要な場合は追加しますが、現在のところ、すべての最新のブラウザーはプレフィックスなしの変換プロパティをサポートしています。唯一の例外はOperaで、Opera Miniモードが有効になっている場合（〜3％の世界のユーザー）。

<!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>