Können Sie CSS zum Spiegeln / Spiegeln von Text verwenden?

Ist es möglich, CSS / CSS3 zum Spiegeln von Text zu verwenden?

Insbesondere habe ich dieses Scherenzeichen "✂" ( ✂), das ich nach links und nicht nach rechts zeigen möchte.

Sie können CSS-Transformationen verwenden, um dies zu erreichen. Ein horizontaler Flip würde das Skalieren des Div wie folgt beinhalten:

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

Und ein vertikaler Flip würde das Skalieren des Div wie folgt beinhalten:

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

DEMO:

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

Die beiden Parameter sind X-Achse und Y-Achse. -1 ist ein Spiegel. Sie können jedoch auf eine beliebige Größe skalieren, die Ihren Anforderungen entspricht. Umgedreht und rückwärts wäre (-1, -1).

Wenn Sie an der besten Option interessiert sind, die 2011 für die browserübergreifende Unterstützung verfügbar war, lesen Sie meine ältere Antwort .

Echter Spiegel:

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

Sie können entweder Benutzer

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

oder

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

Beachten Sie, dass die Einstellung positionauf absolutesehr wichtig ist! Wenn Sie es nicht einstellen, müssen Sie einstellen display: inline-block;

Ich habe diese Lösung zusammengeschustert, indem ich das Internet einschließlich durchsucht habe

• Antworten zum Stapelüberlauf,
• MSDN-Artikel,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ und
• http://www.useragentman.com/IETransformsTranslator/ .

Diese Lösung scheint in allen Browsern einschließlich IE6 + zu funktionieren und verwendet scale(-1,1)(einen geeigneten Spiegel) und entsprechende filter/ -ms-filterEigenschaften, falls erforderlich (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);
}

Erstellen Sie diese Klasse aus Gründen der Cross-Browser-Kompatibilität

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

Und fügen Sie es Ihrer Symbolklasse hinzu, dh

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

um ein Suchsymbol mit dem Griff links zu erhalten

Sie können 'transform' verwenden, um dies zu erreichen. http://jsfiddle.net/aRcQ8/

CSS:

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

Es gibt auch rotateYeinen echten Spiegel:

transform: rotateY(180deg);

Was vielleicht noch klarer und verständlicher ist.

EDIT: Scheint aber nicht an Opera zu funktionieren ... leider. Aber es funktioniert gut unter Firefox. Ich denke, es könnte erforderlich sein, implizit zu sagen, dass wir translate3dvielleicht eine Art von tun ? Oder etwas ähnliches.

Fügen Sie einfach eine funktionierende Demo für horizontalen und vertikalen Spiegelwechsel hinzu.

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

Dafür hat es bei mir funktioniert <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);

brauche nur Anzeige: Inline-Block oder Block zum Drehen. Die erste Antwort ist also im Grunde gut. Aber -180 hat nicht funktioniert.

Sie könnten versuchen, Box-Reflect

box-reflect: 20px right;

Siehe CSS-Eigenschaft Box-Reflect-Kompatibilität? für mehr Details

Nur noch ein Beispiel, wie der Charakter umgedreht werden könnte. Fügen Sie bei Bedarf Herstellerpräfixe hinzu, aber derzeit unterstützen alle modernen Browser nicht vordefinierte Transformationseigenschaften. Die einzige Ausnahme ist Opera, wenn der Opera Mini-Modus aktiviert ist (~ 3% Weltnutzer).

<!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; ist wahrscheinlich das, wonach Sie suchen.

Das funktioniert gut mit Schriftarten -Symbolen wie "s7-Strich-Symbole" und "Schrift-fantastisch" :

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

Und dann zum Zielelement:

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