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

trying to resolve sorting issues

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-12 15:30:14 -04:00
parent 9e19b5ac0c
commit e3bb654be6
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -20,8 +20,8 @@
} }
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); } .Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); }
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); } .Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); }
.Shot[show="back" ]{ transform: perspective(1000px) rotateY(-60deg); } .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
.Shot[show="pages"]{ transform: perspective(1000px) rotateY(0deg); } .Shot[show="pages"]{ transform: perspective(800px) rotateY(0deg); }
.Book .Book
{ {
@ -61,26 +61,37 @@
float:left; float:left;
position:relative; position:relative;
} }
.Spine__Glue[swing='right'] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)} .Spine__Glue[swing='right'] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
.Spine__Glue[swing='left' ] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)} .Spine__Glue[swing='left' ] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
.Panel.Page .Panel.Page
{ {
height:98%; height:98%;
top:1%; top:1%;
transform:translateX(1px);
transform-style:preserve-3d;
} }
.Panel img .Panel img
{ {
display:block; display:block;
position:relative;
z-index:1;
height:100%; height:100%;
width:auto; width:auto;
backface-visibility: hidden; backface-visibility: visible;
transform: rotateY(180deg);
} }
.Panel img:last-child .Panel img:last-child
{ {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
backface-visibility: hidden;
transform: rotateY(0deg);
}
.Panel.Flip
{
transform-style:preserve-3d;
transform:rotateY(180deg); transform:rotateY(180deg);
} }
.Shadow-Sheet-Before::before, .Shadow-Sheet-After::after .Shadow-Sheet-Before::before, .Shadow-Sheet-After::after
@ -93,6 +104,7 @@
display:block; display:block;
position:absolute; position:absolute;
z-index:100;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
@ -100,7 +112,7 @@
backface-visibility: hidden; backface-visibility: hidden;
} }
.Panel::after .Shadow-Sheet-Before::before
{ {
transform:rotateY(180deg) scaleX(-1); transform:rotateY(180deg) scaleX(-1);
} }
@ -126,6 +138,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index:100;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -133,7 +146,7 @@
<div class="Shot" show="cover"> <div class="Shot" show="cover">
<div class="Book"> <div class="Book">
<img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
<div class="Spine Shadow-Radiosity-Before Shadow-Drop-After"> <div class="Spine Shadow-Radiosity-Before Shadow-Drop-After">
<div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-front.jpg"/><img src="book-panel-front.jpg"/></div></div> <div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-front.jpg"/><img src="book-panel-front.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div> <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
@ -149,18 +162,19 @@
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div> <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div> <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div> <div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-After Shadow-Drop-Before"><img src="book-panel-back.jpg"/><img src="book-panel-back.jpg"/></div></div> <div class="Spine__Glue" swing="closed"><div class="Panel Flip Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-back.jpg"/><img src="book-panel-back.jpg"/></div></div>
</div> </div>
<img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
</div> </div>
</div> </div>
<div> <div>
<button onclick="bookPose('cover'); bookClose();">Cover</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);">0</button> <button onclick="bookPose('pages'); bookOpen(3);">Intro</button>
<button onclick="bookPose('pages'); bookOpen(4);">1</button> <button onclick="bookPose('pages'); bookOpen(4);">Spread 1</button>
<button onclick="bookPose('pages'); bookOpen(5);">2</button> <button onclick="bookPose('pages'); bookOpen(5);">Spread 2</button>
<button onclick="bookPose('pages'); bookOpen(6);">3</button> <button onclick="bookPose('pages'); bookOpen(6);">3</button>
<button onclick="bookPose('pages'); bookOpen(7);">4</button> <button onclick="bookPose('pages'); bookOpen(7);">4</button>
</div> </div>