Skip to content

Instantly share code, notes, and snippets.

@dartiss

dartiss/upside-down.html

Created February 3, 2024 15:40
Show Gist options
  • Save dartiss/96d3cb24dafa47a7ccc25bbee180aaf1 to your computer and use it in GitHub Desktop.
Save dartiss/96d3cb24dafa47a7ccc25bbee180aaf1 to your computer and use it in GitHub Desktop.
Download ZIP
Turn your site upside down!
Raw
upside-down.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ǝɯɐɟ ɟo qƃ5˙1 ʎɯ | ssıʇɹɐ pıʌɐp</title>
</head>
<style type="text/css">
body, iframe {
display: block;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
.rotate{
transform: rotate( 180deg );
}
</style>
<body>
<div class="rotate">
<iframe src="https://artiss.blog" frameborder="0" height="100%" width="100%"></iframe>
</div>
</body>
</html>
@dartiss
Copy link
Author

dartiss commented Feb 3, 2024

This is a fun bit of HTML that will rotate a website 180°. In this case, it will do it with my own site, Artiss.blog, but any can be used in the iframe. I even flip the title upside down using upsidedowntext.com.

This makes use of the CSS transform property to achieve the result.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment