fixes in place
This commit is contained in:
parent
89116fef56
commit
e5c1adf5e4
142
index.html
142
index.html
@ -42,59 +42,67 @@
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.Spine__Glue
|
||||
{
|
||||
flex:0;
|
||||
width:0;
|
||||
height:100%;
|
||||
position:relative;
|
||||
transform:rotateY(-90deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
.Spine__Glue[swing='right']{transform: translateX(-3px) rotateY( -20deg );}
|
||||
.Spine__Glue[swing='left' ]{transform: translateX( 3px) rotateY( -160deg );}
|
||||
.Panel
|
||||
{
|
||||
height:100%;
|
||||
top:0%;
|
||||
float:left;
|
||||
position:relative;
|
||||
}
|
||||
.Spine__Glue[swing='right'] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
|
||||
.Spine__Glue[swing='left' ] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
|
||||
|
||||
.Panel.Page
|
||||
.Page
|
||||
{
|
||||
height:98%;
|
||||
top:1%;
|
||||
transform:translateX(1px);
|
||||
transform-style:preserve-3d;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: transform 1s;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.Panel img
|
||||
{
|
||||
display:block;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
height:100%;
|
||||
width:auto;
|
||||
backface-visibility: visible;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.Panel img:last-child
|
||||
.Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); }
|
||||
.Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
|
||||
.Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); }
|
||||
.Page .Front, .Page .Back
|
||||
{
|
||||
float:left;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
box-shadow: 0px -1px 1px rgb(0 0 0 / 30%);
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.Page .Back
|
||||
{
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
.Panel.Flip
|
||||
.Page img
|
||||
{
|
||||
transform-style:preserve-3d;
|
||||
transform:rotateY(180deg);
|
||||
height:100%;
|
||||
width:auto;
|
||||
}
|
||||
.Shadow-Sheet-Before::before, .Shadow-Sheet-After::after
|
||||
|
||||
.Page--Fill
|
||||
{
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.Page--Shrink
|
||||
{
|
||||
height:98%;
|
||||
top:1%;
|
||||
}
|
||||
.Shadow--Drop::before
|
||||
{
|
||||
transform: rotateX(90deg);
|
||||
backface-visibility: visible;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.Shadow--Sheet::after
|
||||
{
|
||||
content:" ";
|
||||
|
||||
@ -111,24 +119,14 @@
|
||||
height:100%;
|
||||
|
||||
backface-visibility: hidden;
|
||||
transform:scaleX(-1);
|
||||
}
|
||||
.Shadow-Sheet-Before::before
|
||||
.Shadow--Sheet--Flip::after
|
||||
{
|
||||
transform:rotateY(180deg) scaleX(-1);
|
||||
transform:scaleX(1);
|
||||
}
|
||||
.Shadow-Drop-After::after, .Shadow-Drop-Before::before
|
||||
{
|
||||
transform: rotateX(90deg) translateY(-100px) translateZ(12px);
|
||||
box-shadow: 0px 100px 60px black, 0px 100px 20px black;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
border-radius: 39px;
|
||||
}
|
||||
.Shadow-Radiosity-Before::before, .Shadow-Radiosity-After::after
|
||||
|
||||
.Shadow--Radiosity::after
|
||||
{
|
||||
content: " ";
|
||||
background-size: 100% 100%;
|
||||
@ -146,25 +144,21 @@
|
||||
|
||||
<div class="Shot" show="cover">
|
||||
<div class="Book">
|
||||
|
||||
<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 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 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 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 Flip Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-back.jpg"/><img src="book-panel-back.jpg"/></div></div>
|
||||
<img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/>
|
||||
<div class="Page Page--Fill"> <div class="Front Shadow--Radiosity Shadow--Drop"><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="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><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-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-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-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-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-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-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-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
|
||||
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
|
||||
</div>
|
||||
<img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -99,9 +99,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
let $ = query => Array.from(document.querySelectorAll(query));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user