Skip to content

Instantly share code, notes, and snippets.

@randallagordon

randallagordon/css3hud.html

Last active December 10, 2015 01:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save randallagordon/4356342 to your computer and use it in GitHub Desktop.
Save randallagordon/4356342 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Transform HUD
Raw
css3hud.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform HUD</title>
<style type="text/css">
.hud {
-webkit-transform: scaleX(-1) rotate(180deg);
-moz-transform: scaleX(-1) rotate(180deg);
-o-transform: scaleX(-1) rotate(180deg);
-ms-transform: scaleX(-1) rotate(180deg);
transform: scaleX(-1) rotate(180deg);
}
body {
background: #9cd;
color: #256;
font: 18px Helvetica, Arial, sans-serif;
margin: 0 auto;
width: 480px;
}
</style>
</head>
<body>
<div>
<h1>CSS3 Transform HUD</h1>
<p>The text below will be readable when reflected back off a mirror, windshield or other reflective surface.</p>
<!-- Hattip to Zombie Ipsum - http://www.zombieipsum.com/ -->
<p class="hud">Summus brains, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, evil stalking monstra adventus. </p>
<p class="hud">Zombie ipsum reversus ab viral inferno, nam grimes malum cerebro. De carne lumbering animata corpora quaeritis.</p>
<p class="hud">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum libero ac magna gravida volutpat. Cras nisl eros, mattis eu suscipit nec, consectetur vitae purus.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment