Flip the text using CSS
The Flipping effect creates the mirror image of the text. You can flip your text both horizontally and vertically. CSS3 allows adding various effects, including text flipping due to its transformation functions. You can flip a text without any JavaScript code.
Given below is the example of flipping the text without using JavaScript it includes only HTML and CSS.
There are various types of text flipping:
- Horizontal Flip
- Vertical Flip
- Upside Down Flip
- Mirror Image of text
Follow the steps:
- Create HTML file:
Use <span> element with class name “abc” (as your choice). - Create CSS file:
- Specify the Display and Margin properties of <span>.
- Use the transform properties to set the flip you required ( like vertical text flip , Horizontal text flip, Upside down text flip , Mirroring of text )
- Add the colour if you want that your flip text should have different colour.
Below examples illustrates the approach:
Example 1: HTML CSS code to flip the Text Horizontally
HTML
<!DOCTYPE html><html> <head> <title> Title you want </title> <style> span{ display: Inline-block; margin: 50px; } .GFG{ transform: scale(-1, 1); color: #000080; -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> </head> <body> <!-- here write your text you want to flip --> <span>GeeksforGeeks</span> <!-- your class name must be as you above written with .class name --> <span class="GFG">GeeksforGeeks</span> </body> </html> |
Output:
Flip text horizontally
Example 2: HTML CSS code to flip the text upside-down.
HTML
<!DOCTYPE html><html> <head> <title>Title as you want</title> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .backwards { display: inline; font-size: 100px; font-style: bold; -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> </head> <body> <ul class="container"> <li class="backwards">G</li> <li class="backwards">e</li> <li class="backwards">e</li> <li class="backwards">k</li> <li class="backwards">S</li> </ul> </body> </html> |
Output:
Flip upside-down
Example 3: HTML CSS code to flip the text vertically.
HTML
<!DOCTYPE html> <html> <head> <title> Title you want </title> <!-- write your title between title tag --> <style> span { display: Inline-block; margin: 50px; } .GFG { transform: scale(1, -1); color: #000080; -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> </head> <body> <span>GeeksforGeeks</span> <!-- here write your text you want to flip --> <span class="GFG">GeeksforGeeks</span> <!-- your class name must be as you above written with .class name --> </body> </html> |
Output:
flip text vertically
Example 4:
HTML
<!DOCTYPE html><html> <head> <title>Title as you want </title> <style> body { display: flex; justify-content: center; } .main { display: inline-flex; } .box { margin-top: 100px; font-size: 5em; color: #000; font-weight: 900; } #box1::after { content: "GeeksforGeeks"; display: flex; transform: rotateX(180deg); -webkit-background-clip: text; color: #ddd; } </style></head> <body> <div class="main"> <div class="box" id="box1">GeeksforGeeks</div> </div></body> </html> |
Output:
mirroring the text
.png)