CSS
Flip Text Horizontally and Vertically Using CSS3 Easily
Ever wondered how to flip text horizontally and vertically without javascript? In this article, I will share easy ways to achieve the flip text effect just by using CSS/CSS3.
Flip Text Horizontally Using CSS/CSS3
Let’s say that we have some text in a div and we would like to flip this text both horizontally. Let’s see how to do this.
<style> .holder { margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; } .horizontal-flip { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } </style> <h2>Horizontal Text Flip:</h2> <div class="holder horizontal-flip"> 1234567890 </div>
Flip Text Vertically Using CSS/CSS3
Now lets flip the same text vertically just by using CSS.
<style> .holder { margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; } .vertical-flip { -moz-transform: scale(1, -1); -webkit-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } </style> <h2>Vertical Text Flip:</h2> <div class="holder horizontal-flip"> 1234567890 </div>
Simple, isn’t it?
Do you know of any other ways to flip text using just CSS? Feel free to suggest by commenting below.