blocks|key|957421|text|-moz-transform:+scale(-1,+1);
-webkit-transform:+scale(-1,+1);
-o-transform:+scale(-1,+1);
-ms-transform:+scale(-1,+1);
transform:+scale(-1,+1);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|957422|两个参数是X轴和Y轴，-1将是一个镜像，但您可以根据需要缩放到任何大小。上下颠倒的是(-1,+-1)。|unstyled|offset|length|style|CODE|957423|如果你对2011年的跨浏览器支持的最佳选择感兴趣，请访问my+older+answer。|957424|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/revisions/5406661/1^0|0|16|8|0|S|F|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@$G|W|H|X|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@$G|Z|H|10|1|11]]|A|$]]|$1|M|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
</code></pre>

<p>The two parameters are X axis, and Y axis, -1 will be a mirror, but you can scale to any size you like to suit your needs. Upside down and backwards would be <code>(-1, -1)</code>.</p>

<p>If you're interested in the best option available for cross browser support back in 2011, see <a href="https://stackoverflow.com/revisions/5406661/1">my older answer</a>.</p>


blocks|key|741504|text|真实的镜像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|741505|​|741506|.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);
}|code-block|syntax|javascript|741507|<span+class='mirror'>Mirror+Text<span>|741508|741509|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Real mirror:    </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class='mirror'&gt;Mirror Text&lt;span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|957618|text|您可以使用以下两种方式之一|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957619|.your-class{+
++++++position:absolute;+
++++++-moz-transform:+scaleX(-1);+
++++++-o-transform:+scaleX(-1);+
++++++-webkit-transform:+scaleX(-1);+
++++++transform:+scaleX(-1);+
++++++filter:+FlipH;++
}|code-block|syntax|javascript|957620|或|957621|+.your-class{+
++position:absolute;
++transform:+rotate(360deg)+scaleX(-1);
}|957622|请注意，将position设置为absolute非常重要！如果不进行设置，则需要设置display:+inline-block;|offset|length|style|CODE|957623|entityMap^0|0|0|0|0|5|8|G|8|16|M|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]|$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

<p>You can user either </p>

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

<p>or </p>

<pre><code> .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}
</code></pre>

<p>Notice that setting <code>position</code> to <code>absolute</code> is very important! If you won't set it, you will need to set     <code>display: inline-block;</code></p>


blocks|key|741542|text|为实现跨浏览器兼容性，请创建此类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|741543|.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);
}|code-block|syntax|javascript|741544|并将其添加到您的图标类中，即|741545|<i+class="icon-search+mirror-icon"></i>|741546|获取手柄位于左侧的搜索图标的步骤|741547|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>For cross browser compatibility create this class</p>

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

<p>And add it to your icon class, i.e.</p>

<pre><code>&lt;i class="icon-search mirror-icon"&gt;&lt;/i&gt;
</code></pre>

<p>to get a search icon with the handle on the left</p>


blocks|key|741423|text|你可以使用‘转换’来实现这一点。http://jsfiddle.net/aRcQ8/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|741424|css：|741425|-moz-transform:+rotate(-180deg);
-webkit-transform:+rotate(-180deg);
transform:+rotate(-180deg);|code-block|syntax|javascript|741426|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/aRcQ8/^0|G|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>you can use 'transform' to achieve this. 
<a href="http://jsfiddle.net/aRcQ8/" rel="nofollow">http://jsfiddle.net/aRcQ8/</a></p>

<p>css:</p>

<pre><code>-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
</code></pre>


blocks|key|957510|text|只是添加了一个水平和垂直翻转镜子的工作演示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957511|​|957512|.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);
}|code-block|syntax|javascript|957513|<div+class="horizontal-flip">
++Hello,+World
++<input+type="text">
</div>
<hr>
<div+class="vertical-flip">
++Hello,+World
++<input+type="text">
</div>|957514|957515|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Just adding a working demo for horizontal and vertical mirror flip.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="horizontal-flip"&gt;
  Hello, World
  &lt;input type="text"&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;div class="vertical-flip"&gt;
  Hello, World
  &lt;input type="text"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|741657|text|再举一个例子，这个角色是如何被翻转的。如果需要，可以添加供应商前缀，但目前所有现代浏览器都支持无前缀的转换属性。唯一的例外是Opera，如果启用了Opera+Mini模式(约3%25的全球用户)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|741658|​|741659|<!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>|code-block|syntax|javascript|741660|741661|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Text rotation&lt;/title&gt;
  &lt;style type="text/css" media="screen"&gt;
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  &lt;/style&gt;
  
&lt;/head&gt;
&lt;body&gt;
  &lt;ul&gt;
    &lt;li&gt;Original: &lt;span class="scissors original"&gt;&amp;#9986;&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;Flipped: &lt;span class="scissors flipped"&gt;&amp;#9986;&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;Upward: &lt;span class="scissors upward"&gt;&amp;#9986;&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;Downward: &lt;span class="scissors downward"&gt;&amp;#9986;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|957437|text|你可以试试box-reflect|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957438|box-reflect:+20px+right;|code-block|syntax|javascript|957439|有关详细信息，请参阅CSS+property+box-reflect+compatibility?|offset|length|957440|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9173666/css-property-box-reflect-compatibility^0|0|0|A|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You could try box-reflect</p>

<pre><code>box-reflect: 20px right;
</code></pre>

<p>see <a href="https://stackoverflow.com/questions/9173666/css-property-box-reflect-compatibility">CSS property box-reflect compatibility?</a> for more details</p>


blocks|key|957485|text|这就是我在<span+class="navigation-pipe">&gt;</span>上的工作原理|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|957486|display:inline-block;
-moz-transform:+rotate(360deg);
-webkit-transform:+rotate(360deg);
transform:+rotate(360deg);
filter:+progid:DXImageTransform.Microsoft.BasicImage(rotation=4);|code-block|syntax|javascript|957487|只需要显示:内联-块或块旋转。所以基本上第一个答案是好的。但是-180不起作用。|957488|entityMap^0|5|15|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>this is what worked for me for <code>&lt;span class="navigation-pipe"&gt;&amp;gt;&lt;/span&gt;</code></p>

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

<p>just need display:inline-block or block to rotate. So basically first answer is good. But -180 didn't worked.</p>


blocks|key|741759|text|这与's7+stroke+icons'和'font-awesome'等字体图标配合使用效果很好|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|741760|.mirror+{
++display:+inline-block;
++transform:+scaleX(-1);
}|code-block|syntax|javascript|741761|然后在目标元素上：|741762|<button>
++<span+class="s7-back+mirror"></span>
++<span>Next</span>
</button>|741763|entityMap|0|LINK|mutability|MUTABLE|url|https://hackerthemes.com/charming-pro/docs/icons/stroke7/|1|https://fontawesome.com/^0|2|H|0|K|E|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>That works fine with font icons like <a href="https://hackerthemes.com/charming-pro/docs/icons/stroke7/" rel="nofollow noreferrer">'s7 stroke icons'</a> and <a href="https://fontawesome.com/" rel="nofollow noreferrer">'font-awesome'</a>:</p>

<pre><code>.mirror {
  display: inline-block;
  transform: scaleX(-1);
}
</code></pre>

<p>And then on target element:</p>

<pre><code>&lt;button&gt;
  &lt;span class="s7-back mirror"&gt;&lt;/span&gt;
  &lt;span&gt;Next&lt;/span&gt;
&lt;/button&gt;
</code></pre>


blocks|key|741785|text|direction:+rtl;可能就是你要找的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|741786|entityMap^0|0|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>direction: rtl;</code> is probably what you are looking for.</p>


blocks|key|957741|text|我们可以用很少的代码，通过css+keyframes和它的alternate属性(试着删除alternate来看看区别)来制作非常酷的文本效果：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|957742|​|957743|span+{
++font-weight:+1000;+font-size:+3.3em;
}
small+{
++display:+inline-block;
++font-size:+2.3em;
++animation:+1s+infinite+alternate+coolrotate
}

@keyframes+coolrotate+{
++from+{
++++transform:+scale(1,+1)+translate(-0.1em,+0)
++}
++to+{
++++transform:+scale(-1,+1)+translate(0,+0)
++}
}|code-block|syntax|javascript|957744|<span>
++<span>c</span>
++<small>o</small>
++<span>o</span>
++<small>L</small>
++<small>...</small>
</span>|957745|957746|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes^0|T|9|19|9|D|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>We can make pretty cool text effects using very little code, with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" rel="nofollow noreferrer">css keyframes</a>, and its <code>alternate</code> property (try removing <code>alternate</code> to see the difference):</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>span {
  font-weight: 1000; font-size: 3.3em;
}
small {
  display: inline-block;
  font-size: 2.3em;
  animation: 1s infinite alternate coolrotate
}

@keyframes coolrotate {
  from {
    transform: scale(1, 1) translate(-0.1em, 0)
  }
  to {
    transform: scale(-1, 1) translate(0, 0)
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;
  &lt;span&gt;c&lt;/span&gt;
  &lt;small&gt;o&lt;/small&gt;
  &lt;span&gt;o&lt;/span&gt;
  &lt;small&gt;L&lt;/small&gt;
  &lt;small&gt;...&lt;/small&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


<p>Is it possible to use CSS/CSS3 to mirror text?</p>

<p>Specifically, I have this scissors char “&#9986;” (<code>&amp;#9986;</code>) that I'd like to display pointing left and not right.</p>


Can you use CSS to mirror/flip text?

可以使用CSS/CSS3来镜像文本吗？具体地说，我有这个剪刀字符“✂”(&#9986;)，我想要显示指向左侧而不是右侧。

问你能使用CSS来镜像/翻转文本吗？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能使用CSS来镜像/翻转文本吗？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能使用CSS来镜像/翻转文本吗？
EN