CodePen

HTML

            
              <div class="palindrome">
  race<span class="flip">rac</span>
</div>
<div class="palindrome">
  revi<span class="flip">rev</span>
</div>
<div class="palindrome">
  rota<span class="flip">rot</span>
</div>

            
          
!

CSS

            
              /*
http://stackoverflow.com/questions/3433641/flipping-inverting-mirroring-text-using-css-only
http://www.freescrabbledictionary.com/word-lists/palindrome-words/
*/

.palindrome {
  font-family: monospace;
  font-size: 2em;
  text-transform: uppercase;
}
.flip {
  display: inline-block;
  transform: scaleX(-1);  /* standard */
  filter: FlipH;          /* IE 6/7/8 */
}
            
          
!

JS

            
              
            
          
!
999px
Loading ..................