How can I flip text horizontally and vertically using CSS transformations?

Flipping Text using CSS Transformations

In CSS, you can manipulate text and other elements using transformations. One common transformation is mirroring, also known as flipping. This effect can be achieved using a simple CSS property.

To flip text horizontally (mirror it across the vertical axis), use the following CSS property:

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

This property scales the element horizontally by -1, effectively flipping it along the vertical axis.

Similarly, to flip text vertically (mirror it across the horizontal axis), use this property:

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

By applying this property, you scale the element vertically by -1, flipping it along the horizontal axis.

Example

Consider the following HTML code, which displays some text and a scissors character:

Demo text ✂
Demo text ✂

The CSS code below applies the horizontal and vertical flipping effects to the corresponding spans:

span{ display: inline-block; margin:1em; }
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

This will mirror the scissors characters along their respective axes, creating the desired left-pointing scissors.

The above is the detailed content of How can I flip text horizontally and vertically using CSS transformations?. For more information, please follow other related articles on the PHP Chinese website!