Head-Up Display (HUD)

The idea here is to display a screen on a transparent support - like a wind shield.
The data are displayed on the screen, reflected on the transparent support, and nothing is preventing you from seeing through it.

(Click the image to enlarge it)

Here is above an HTML page, tweaked by some CSS classes to mirror the data (as the page is reflected on the screen, the page content has to be displayed as in a mirror, and flipped upside down.). In this case, the page is rendered on Chromium in kiosk mode, running on a Raspberry PI with a touch screen attached to it.

CSS Classes:

    .mirror {
      display: block;
      -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
      -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
      -o-transform: matrix(-1, 0, 0, 1, 0, 0);
      transform: matrix(-1, 0, 0, 1, 0, 0);
    }

    .upside-down {
      height: 100%;
      width: 100%;
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .mirror-upside-down {
      display: block;
      -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg);
      -moz-transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg);
      -o-transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg);
      transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg);
    }

In the picture above, we use the class as follow:

<div id="the-div" class="mirror-upside-down big" style="padding: 0px; text-align: center;">
  <hr/>
  <table>
    <tr>
      <td colspan="2">GPS Data</td>
    </tr>
    <tr>
      <td>
        <span>Your position:</span>
        <br/>
        <span>N 37° 44.93'</span>
...

The page on the screen (not on the wind shield) would actually look like this:

---

GPS Data
Your position: N 37° 44.93' W 122°30.42'	Your Speed: 12.34 kts

You can also work around the perspective effect on the reflected page by tweaking the CSS classes:

    .mirror-upside-down {
      display: block;
      -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg) perspective(50em) rotateX(-40deg);
      -moz-transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg) perspective(50em) rotateX(-40deg);
      -o-transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg) perspective(50em) rotateX(-40deg);
      transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg) perspective(50em) rotateX(-40deg);
    }

---

GPS Data
Your position: N 37° 44.93' W 122°30.42'	Your Speed: 12.34 kts

We call this the Star Wars effect. ;)

Possibilities are endless!
The full page is here.