flip text vertically – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Tue, 06 Dec 2016 10:22:33 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 Flip Text Horizontally and Vertically Using CSS3 Easily https://theextremewebdesigns.com/blog/flip-text-horizontally-and-vertically-using-css3-easily/ https://theextremewebdesigns.com/blog/flip-text-horizontally-and-vertically-using-css3-easily/#respond Tue, 06 Dec 2016 10:22:33 +0000 https://theextremewebdesigns.com/blog/?p=4028 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.

]]> https://theextremewebdesigns.com/blog/flip-text-horizontally-and-vertically-using-css3-easily/feed/ 0 4028