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.