Flip the text using CSS

Last Updated : 15 May, 2023

The Flipping effect creates a 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, or Mirroring of text )
- Add the color if you want that your flip text should have a different color.

The below examples illustrate 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 and CSS code for mirroring the text.

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>