Flip over your text as web design elements with CSS!

This first code flips each letter horizontally making them face towards the left while retaining their original positions and sequence.

CSS

.one   {-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

-o-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

transform:rotateY(180deg);

unicode-bidi:bidi-override;

direction:rtl;}

HTML

<span  >Test number one.</span>

The second code flips the letters’ direction, position, AND sequence. What used to be the first letter of the first word of the phrase is now the last, creating a mirror image of the original text.

CSS

.two   {-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

-o-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

transform:rotateY(180deg);}

HTML

<span  >Test number two.</span>

The third and last code simply flips the letter order but not their direction they face.

CSS

.three   {unicode-bidi:bidi-override;

direction:rtl;}

HTML

<span  >Test number three.</span>

Incoming search terms for the article:

• css reverse text
• css mirror image text
• css3 reverse text
• css reverse character
• reverse characters css
• reverse letter css
• How to reverse text in css
• css reverse
• reverse text with css
• reverse 180 letters