SethTrowbridge/css-3d-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

correct pages

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-13 17:25:34 -04:00
parent f1eeab5557
commit 5bb9a865b6
8 changed files with 171 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
book-page-0.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
book-page-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 684 KiB

BIN
book-page-6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 575 KiB

BIN
book-page-devo-1.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 83 KiB

BIN
book-page-devo-2.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
book-page-intro-left.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
book-page-intro-right.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 59 KiB

168
index.html
View File

@ -2,14 +2,13 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
</head> </head>
<body> <body>
<main> <main>
<style>
<style> .Shot
.Shot {
{
transform: perspective(1000px); transform: perspective(1000px);
transform-style: preserve-3d; transform-style: preserve-3d;
width:500px; width:500px;
@ -17,22 +16,22 @@
margin:20px auto 0 auto; margin:20px auto 0 auto;
text-align:center; text-align:center;
transition: transform 1s; transition: transform 1s;
} }
.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); } .Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); } .Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); } .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
.Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); } .Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); }
.Book .Book
{ {
height:100%; height:100%;
transform-style: preserve-3d; transform-style: preserve-3d;
transform: translateZ(-100px); transform: translateZ(-100px);
position: relative; position: relative;
display:inline-block; display:inline-block;
} }
.Spine .Spine
{ {
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
margin:0 auto; margin:0 auto;
@ -41,20 +40,20 @@
left:0; left:0;
width:100%; width:100%;
height:100%; height:100%;
} }
.Page .Page
{ {
display: inline-block; display: inline-block;
position: relative; position: relative;
transition: transform 1s; transition: transform 1s;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); } .Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); }
.Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); } .Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
.Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); } .Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); }
.Page .Front, .Page .Back .Page .Front, .Page .Back
{ {
float:left; float:left;
position:absolute; position:absolute;
top:0; top:0;
@ -63,33 +62,33 @@
backface-visibility: hidden; backface-visibility: hidden;
transform-style: preserve-3d; transform-style: preserve-3d;
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.Page .Back .Page .Back
{ {
transform: rotateY(0deg); transform: rotateY(0deg);
} }
.Page img .Page img
{ {
height:100%; height:100%;
width:auto; width:auto;
} }
.Page--Fill .Page--Fill
{ {
display: block; display: block;
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
height:100%; height:100%;
} }
.Page--Shrink .Page--Shrink
{ {
height:98%; height:98%;
top:1%; top:1%;
} }
.Shadow--Drop::before .Shadow--Drop::before
{ {
transform: rotateX(90deg) translateY(-100px) translateZ(-3px); transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
box-shadow: 0px 100px 60px black, 0px 100px 17px black; box-shadow: 0px 100px 60px black, 0px 100px 17px black;
display: block; display: block;
@ -99,10 +98,10 @@
width: 100%; width: 100%;
height: 8px; height: 8px;
border-radius: 39px; border-radius: 39px;
} }
.Shadow--Sheet::after .Shadow--Sheet::after
{ {
content:" "; content:" ";
background-size: 100% 100%; background-size: 100% 100%;
@ -119,14 +118,14 @@
backface-visibility: hidden; backface-visibility: hidden;
transform:scaleX(-1); transform:scaleX(-1);
} }
.Shadow--Sheet--Flip::after .Shadow--Sheet--Flip::after
{ {
transform:scaleX(1); transform:scaleX(1);
} }
.Shadow--Radiosity::after .Shadow--Radiosity::after
{ {
content: " "; content: " ";
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0px 0px; background-position: 0px 0px;
@ -138,57 +137,58 @@
z-index:100; z-index:100;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<div class="Shot" show="cover">
<div class="Shot" show="cover">
<div class="Book"> <div class="Book">
<img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/> <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
<div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div> <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
<div class="Spine"> <div class="Spine">
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div> <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div> <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
</div> </div>
</div> </div>
</div> </div>
<div>
<div>
<button onclick="bookPose('cover'); bookClose();">Front</button> <button onclick="bookPose('cover'); bookClose();">Front</button>
<button onclick="bookPose('spine'); bookClose();">Spine</button> <button onclick="bookPose('spine'); bookClose();">Spine</button>
<button onclick="bookPose('back'); bookClose();">Back</button> <button onclick="bookPose('back'); bookClose();">Back</button>
<button onclick="bookPose('pages'); bookOpen(3);">Intro</button> <button onclick="bookPose('pages'); bookOpen(4);">Intro</button>
<button onclick="bookPose('pages'); bookOpen(4);">Spread 1</button> <button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
<button onclick="bookPose('pages'); bookOpen(5);">Spread 2</button> <button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
<button onclick="bookPose('pages'); bookOpen(6);">3</button> </div>
<button onclick="bookPose('pages'); bookOpen(7);">4</button>
</div>
</main>
<script> <script>
let $ = query => Array.from(document.querySelectorAll(query)); let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]"); let pages = $("[swing]");
let table = $(".Shot")[0]; let table = $(".Shot")[0];
let bookOpen = index => let bookOpen = index =>
{ {
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") ); pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
}; };
let bookClose = () => let bookClose = () =>
{ {
pages.forEach(p=>p.setAttribute("swing", "closed")); pages.forEach(p=>p.setAttribute("swing", "closed"));
}; };
let bookPose = inPanel => let bookPose = inPanel =>
{ {
table.setAttribute("show", inPanel); table.setAttribute("show", inPanel);
bookClose(); bookClose();
}; };
</script> </script>
</main>
</body> </body>
</html> </html>