Created
August 8, 2019 22:30
-
-
Save MetroWind/e59ebb6e5e69bedb05c487fc73abc0f7 to your computer and use it in GitHub Desktop.
CSS Perspective
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8" /> | |
| <style> | |
| :root | |
| { | |
| --distance: 600px; | |
| --angle: 30deg; | |
| } | |
| html | |
| { | |
| font-family: "IBM Plex Sans", sans-serif; | |
| color: white; | |
| background-color: #222; | |
| font-size: 30px; | |
| font-weight: bold; | |
| line-height: 1.0; | |
| } | |
| .Blue | |
| { | |
| color: rgba(0, 180, 255, 0.7); | |
| } | |
| .Small | |
| { | |
| font-size: 50%; | |
| } | |
| .Large | |
| { | |
| font-size: 300%; | |
| } | |
| .Column | |
| { | |
| /* border: 1px solid red; */ | |
| height: 450px; | |
| } | |
| #Col1 | |
| { | |
| transform-origin: center right; | |
| transform: perspective(var(--distance)) rotateY(calc(-1*var(--angle))); | |
| } | |
| #Col2 | |
| { | |
| transform-origin: center left; | |
| transform: perspective(var(--distance)) rotateY(var(--angle)); | |
| } | |
| #TheBlock | |
| { | |
| margin: 3em 4px 0px auto; | |
| height: 4em; | |
| width: 3em; | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| white, | |
| white 6px, | |
| transparent 6px, | |
| transparent 10px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <div id="Col1" class="Column" style="display: inline-block; max-width: 250px; text-align: right;"> | |
| <div class="Blue Line">21 juni</div> | |
| <div class="White Line">tot en met</div> | |
| <div class="Blue Line">8 juli</div> | |
| <div class="While Line Small" style="margin-top: 103px;">(some stuff)</div> | |
| <div class="Blue Line Small" style="margin-top: 1em;">(some other stuff)</div> | |
| <div id="TheBlock"></div> | |
| </div><div id="Col2" class="Column" style="display: inline-block; width: 500px; position: absolute;"> | |
| <div class="White Line Large">Projector</div> | |
| <div class="Blue Line Large" style="position: relative; top: -0.6em;"> | |
| Spectre | |
| </div> | |
| <div class="While Line">Some Guy</div> | |
| <div class="Blue Line">Some Other Guy</div> | |
| <div class="White Line" style="margin-top: 3em;">Stuff stuff</div> | |
| <div class="Blue Line">More stuff!</div> | |
| <div class="Blue Line Small" style="margin-top: 3em;">https://darksair.org/</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment