Home > Article > Web Front-end > Can CSS Flip Text Horizontally? How to Display the Scissors Character (✂️) Facing Left?
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.
<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>
<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 ✂</span> <span class='flip_V'>Demo text ✂</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!