w3docs logo
  1. Snippets
  2. CSS
  3. How to Flip Text with CSS

How to Flip Text with CSS

CSS3 allows adding various effects, including text flipping due to transformation functions. You can flip a text without any JavaScript code.

The flipping effect creates a mirror image of an element. You can flip an element both horizontally and vertically.

In this snippet, we’re going to show some examples of flipping a text using only CSS.

Create HTML

  • Use the <span> element with the class name “flipH” and add content.
<span class="flipH">W3Docs &#9657;</span>

Add CSS

span {
  display: inline-block;
  margin: 40px;
}

.flipH {
  transform: scale(-1, 1);
  color: #1c87c9;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

Here is the full example.

Example of flipping a text horizontally:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        margin: 40px;
      }
      .flipH {
        transform: scale(-1, 1);
        color: #1c87c9;
        -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>W3Docs &#9657;</span>
    <span class="flipH">W3Docs &#9657;</span>
  </body>
</html>

Result

W3Docs ▹ W3Docs ▹

Example of flipping a text vertically:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        margin: 40px;
      }
      .flipV {
        transform: scale(1, -1);
        color: #8ebf42;
        -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 class="flipV">W3Docs &#9657;</span>
  </body>
</html>

Example of flipping a text upside down:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .container:hover .backwards {
        margin: 15px;
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
      }
      .space {
        padding-left: 50px;
      }
      .container:hover .space {
        padding-right: 50px;
        padding-left: 0;
      }
      .backwards {
        display: inline;
        font-size: 100px;
        font-style: bold;
        transition: all .9s;
        -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">W</li>
      <li class="backwards">3</li>
      <li class="backwards">D</li>
      <li class="backwards">O</li>
      <li class="backwards">C</li>
      <li class="backwards">S</li>
    </ul>
  </body>
</html>

Example of mirroring a text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #000000;
        display: flex;
        justify-content: center;
      }
      .main {
        display: inline-flex;
      }
      .box {
        margin-top: 50px;
        font-size: 5em;
        padding: 20px;
        color: white;
        font-weight: 800;
      }
      #box1::after {
        content: "W3Docs";
        display: flex;
        transform: rotateX(180deg);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .0) 10%, rgba(255, 255, 255, .5));
        -webkit-background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="box" id="box1">W3Docs</div>
    </div>
  </body>
</html>
Do you find this helpful?