How To Reverse Text Using CSS

How To Reverse Text Using CSS

This CSS snippet will teach you how to flip over your text as web design elements.

This first code flips each letter horizontally making them face towards the left whilst still 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 class="one">Test number one.</span>

This second code flips not just the direction in which each letter faces but also their 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 class="two">Test number two.</span>

This third and final code simply flips the letter order but not their directions they are facing.

CSS

.three {unicode-bidi:bidi-override;     direction:rtl;}

HTML

<span class="three">Test number three.</span>

Wanting to learn more of jQuery Tutorials for the masses you can check out the jQuery Tutorials for the masses site.