Created
August 15, 2024 12:29
-
-
Save mwdchang/25bf43fecf46fe729e67ddb7d19161f6 to your computer and use it in GitHub Desktop.
CSS flip-through book
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
| <html> | |
| <head><title> Book:: Demos </title> | |
| <style> | |
| #canvas { | |
| -webkit-perspective: 800px; | |
| -webkit-perspective-origin: 50% 200px; | |
| -webkit-transform: rotateY(0deg) rotateX(0deg); | |
| -webkit-transform-style: preserve-3d; | |
| } | |
| #cube { | |
| position: relative; | |
| margin: 0 auto; | |
| height: 400px; | |
| width: 400px; | |
| -webkit-transition: -webkit-transform 1.5s ease; | |
| -webkit-transform-style: preserve-3d; | |
| -webkit-transform: translateZ(-250px) | |
| } | |
| .face { | |
| position:absolute; | |
| height:650px; | |
| width:525px; | |
| padding: 10px; | |
| border: 15px double #000000; | |
| border-radius: 2%; | |
| opacity: 0.5; | |
| border-color: rgb(45, 120, 80); | |
| transform-origin: 0% 0%; | |
| box-sizing: border-box; | |
| -webkit-transition: -webkit-transform 1.5s ease; | |
| -webkit-transform-style: preserve-3d; | |
| } | |
| #cube .s1 { | |
| -webkit-transform: translateX(200px) rotateY(10deg); | |
| } | |
| #cube .s2 { | |
| -webkit-transform: translateX(200px) rotateY(10deg); | |
| } | |
| #cube .s3 { | |
| -webkit-transform: translateX(200px) rotateY(10deg); | |
| } | |
| #cube .s4 { | |
| -webkit-transform: translateX(200px) rotateY(10deg); | |
| } | |
| #cube .s5 { | |
| -webkit-transform: translateX(200px) rotateY(10deg); | |
| } | |
| #cube .s6 { | |
| -webkit-transform: translateX(200px) rotateY(10deg); | |
| } | |
| p { | |
| font-family: Calibri; | |
| font-size: 16px; | |
| line-height: 145%; | |
| color: #555555; | |
| } | |
| code { | |
| border: 1 solid rgb(170, 170, 170); | |
| border-radius: 7px; | |
| background-color: rgb(220, 220, 220); | |
| margin: 0px; | |
| padding: 1px 6px; | |
| color: #666666; | |
| } | |
| </style> | |
| </head> | |
| <body style="margin:5%"> | |
| <p> | |
| A "book" created with <code>DIV</code> tags and CSS-transforms. | |
| <br> Use the <code>up/down keys</code> to rotate book, use <code>left/right keys</code> to flip the pages | |
| </p> | |
| <div id="canvas"> | |
| <div id="cube" style="web"> | |
| <div id="f6" class="face s6"> | |
| <div id="observablehq-final-455820a7"></div> | |
| <p>Credit: <a href="https://observablehq.com/d/70c2fea4826e6a52@113">WebGL with PIXI by Daniel Chang</a></p> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css"> | |
| <script type="module"> | |
| import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js"; | |
| import define from "https://api.observablehq.com/d/[email protected]?v=4"; | |
| new Runtime().module(define, name => { | |
| if (name === "final") return new Inspector(document.querySelector("#observablehq-final-455820a7")); | |
| }); | |
| </script> | |
| </div> | |
| <div id="f5" class="face s5" style="opacity: 1.0"> | |
| <iframe | |
| width="100%" | |
| height="100%" | |
| style="opacity: 1.0; background: #FFF" | |
| src="https://mwdchang.github.io/arc-clock/"> | |
| </iframe> | |
| </div> | |
| <div id="f4" class="face s4" style="opacity: 1.0"> | |
| <iframe | |
| width="100%" | |
| height="100%" | |
| style="opacity: 1.0; background: #FFF" | |
| src="https://mwdchang.github.io/polaroids/"> | |
| </iframe> | |
| </div> | |
| <div id="f3" class="face s3" style="opacity: 0.7"> | |
| <img | |
| style="width: 100%; height: 100%" | |
| src="https://wiki.installgentoo.com/images/thumb/1/12/Vim_cheat_sheet.png/1551px-Vim_cheat_sheet.png"> | |
| </img> | |
| </div> | |
| <div id="f2" class="face s2" style="opacity: 0.9"> | |
| <iframe | |
| width="100%" | |
| height="100%" | |
| src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"> | |
| </iframe> | |
| </div> | |
| <div id="f1" class="face s1 page1" style="background: #EEE; opacity: 0.7"> | |
| <h1> This is a book of stuff </h1> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let xAngle = 0; | |
| let yAngle = 0; | |
| let current = 0; | |
| document.addEventListener("keydown", function(evt) { | |
| switch (evt.keyCode) { | |
| case 37: | |
| // yAngle -= 60; | |
| if (current >= 6) break; | |
| document.getElementById(`f${current + 1}`).style.webkitTransform = "translateX(200px) rotateY(" + (-175 + current) + "deg)"; | |
| current ++; | |
| console.log('!!', current); | |
| break; | |
| case 38: | |
| xAngle += 40; | |
| break; | |
| case 39: | |
| // yAngle += 60; | |
| if (current <= 0) break; | |
| document.getElementById(`f${current}`).style.webkitTransform = "translateX(200px) rotateY(10deg)"; | |
| current --; | |
| console.log(current); | |
| break; | |
| case 40: | |
| xAngle -= 40; | |
| break; | |
| }; | |
| document.getElementById("cube").style.webkitTransform = "translateZ(-250px) rotateX(" + xAngle + "deg) rotateY("+yAngle+"deg)"; | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment