Skip to content
Related Articles

Related Articles

Improve Article

Flip the text using CSS

  • Difficulty Level : Medium
  • Last Updated : 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:
    1. Specify the Display and Margin properties of <span>.
    2. Use the transform properties to set the flip you required ( like vertical text flip , Horizontal text flip, Upside down text flip , Mirroring of text  )
    3. 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :