Can CSS Transformations Flip Text Horizontally and Vertically?

Flipping Text using CSS

Is it possible to manipulate text using CSS to mirror or flip its orientation? This question arises when you encounter scenarios where you need to display specific characters or text in a reversed direction, such as flipping a scissors character from pointing right to left.

Answer:

Yes, CSS transformations provide the ability to mirror or flip text. To achieve this, you can use the scale() function.

Horizontal Flip:

A horizontal flip reverses the direction of the text on the x-axis, making it appear as if it's pointing in the opposite direction. To achieve this, scale the element horizontally by a factor of -1:

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

Similarly, a vertical flip flips the text along the y-axis, reversing its vertical direction. To do this, scale the element vertically by -1:

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

Example:

Here's an example using HTML and CSS to demonstrate the flipping effect:

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

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

By using this CSS, the scissors character in the first span (flip_H) will be mirrored horizontally, facing left, while the character in the second span (flip_V) will be flipped vertically, facing upside down.

The above is the detailed content of Can CSS Transformations Flip Text Horizontally and Vertically?. For more information, please follow other related articles on the PHP Chinese website!