Flip the text using CSS - GeeksforGeeks

10 Mar, 2021
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.
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.
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
CSS-Properties
CSS-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript