Mirroring the text of your webpage

There are millions of websites nowadays on the Internet. Most of them look alike.If you want to experiment and create a site with some funny or original effects, you can mirror the text on your webpage, or even create a website which can be only read using a mirror. Let’s see how this can be done.

Step 1: Create a webpage

Add a new webpage to your website, or simply create a webpage if it is standalone. The code should look somehow like the one below:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body></body>
</html>

This is a basic HTML page code, without anything added to it. It is not enough to create anything we need, so let’s save it as, for example, MyPage.html and skip to step two.

Step 2: Add the text contents to the page

Now fill your page with some contents, e.g. with the Lorem Ipsum text:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body>
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2>Lorem ipsum dolor</h2>
    <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>consectetur adipiscing elit</li>
    </ul>
    <h3>Lorem ipsum dolor</h3>
    <ol>
      <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
      <li>Ut enim ad minim veniam</li>
    </ol>
    <h4>Lorem ipsum dolor</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </body>
</html>

Step 3: Add the CSS rules

Now create the CSS rules for the page so that the text was transformed and looked like it were written through the mirror:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
    <style>
      body {
        direction: rtl;
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
        unicode-bidi: bidi-override;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2>Lorem ipsum dolor</h2>
    <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>consectetur adipiscing elit</li>
    </ul>
    <h3>Lorem ipsum dolor</h3>
    <ol>
      <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
      <li>Ut enim ad minim veniam</li>
    </ol>
    <h4>Lorem ipsum dolor</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </body>
</html>

That’s it. The text now should look like this:

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit

Lorem ipsum dolor

  1. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  2. Ut enim ad minim veniam

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

DownloadDemoLive example

Leave a comment