Can CSS Flip Text Horizontally? How to Display the Scissors Character (✂️) Facing Left?

Mirroring Text with CSS3

Question:

Is it feasible to mirror text using CSS or CSS3? Particularly, how can you display the scissors character ("✂") facing left instead of right?

Answer:

Yes, CSS transformations afford you the ability to achieve this effect.

• Horizontal Flip:

<code class="css">-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>

• Vertical Flip:

<code class="css">-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>

Live Example:

<code class="css">span {
  display: inline-block;
  margin: 1em;
}
.flip_H {
  transform: scale(-1, 1);
  color: red;
}
.flip_V {
  transform: scale(1, -1);
  color: green;
}</code>

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

The above is the detailed content of Can CSS Flip Text Horizontally? How to Display the Scissors Character (✂️) Facing Left?. For more information, please follow other related articles on the PHP Chinese website!