2021-08-10 16:53:55 -04:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2021-08-11 17:33:00 -04:00
2021-08-11 09:35:40 -04:00
< / head >
< body >
< main >
2021-08-10 16:53:55 -04:00
2021-08-11 13:29:50 -04:00
< style >
2021-08-11 17:33:00 -04:00
.Shot
2021-08-11 13:29:50 -04:00
{
2021-08-12 09:27:43 -04:00
transform: perspective(1000px);
2021-08-11 13:29:50 -04:00
transform-style: preserve-3d;
2021-08-11 17:13:04 -04:00
width:500px;
height: 400px;
margin:20px auto 0 auto;
text-align:center;
}
2021-08-11 17:33:00 -04:00
.Table
{
2021-08-12 09:27:43 -04:00
height:100%;
2021-08-11 17:33:00 -04:00
transform:rotateY(-70deg);
transform-style: preserve-3d;
transition: transform 1s;
}
.Table[show="cover"]{ transform:rotateY(-70deg); }
.Table[show="spine"]{ transform:rotateY(-10deg); }
2021-08-12 09:27:43 -04:00
.Table[show="back" ]{ transform:rotateY(-235deg); }
.Table[show="pages"]{ transform:rotateY(-180deg); }
2021-08-11 17:33:00 -04:00
2021-08-11 17:13:04 -04:00
.Book
{
2021-08-12 09:27:43 -04:00
height:100%;
2021-08-11 17:13:04 -04:00
transform-style: preserve-3d;
position: relative;
display:inline-block;
2021-08-11 13:29:50 -04:00
}
.Spine
{
display:flex;
justify-content:space-between;
margin:0 auto;
2021-08-11 17:13:04 -04:00
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
2021-08-11 13:29:50 -04:00
}
.Spine__Glue
{
flex:0;
2021-08-11 17:33:00 -04:00
width:0;
2021-08-11 13:29:50 -04:00
height:100%;
position:relative;
2021-08-11 17:13:04 -04:00
transform:rotateY(90deg);
2021-08-11 13:29:50 -04:00
transform-style: preserve-3d;
2021-08-11 17:13:04 -04:00
transition: transform 0.4s;
2021-08-11 13:29:50 -04:00
}
2021-08-11 17:33:00 -04:00
.Spine__Glue[swing='right']{transform: rotateY( 20deg );}
.Spine__Glue[swing='left' ]{transform: rotateY( 160deg );}
2021-08-11 13:29:50 -04:00
.Panel
{
height:100%;
top:0%;
float:left;
position:relative;
}
2021-08-11 17:33:00 -04:00
.Spine__Glue[swing='right'] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
.Spine__Glue[swing='left' ] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
2021-08-11 13:29:50 -04:00
.Panel.Page
{
height:98%;
top:1%;
}
.Panel img
{
display:block;
height:100%;
width:auto;
backface-visibility: hidden;
}
.Panel img:last-child
{
position:absolute;
top:0;
left:0;
transform: rotateY(180deg);
}
2021-08-12 10:53:23 -04:00
.Panel.Page::before, .Panel.Page::after
2021-08-11 13:29:50 -04:00
{
content:" ";
background-size: 100% 100%;
background-position: 0px 0px;
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
}
.Panel::after
{
transform:rotateY(180deg) scaleX(-1);
}
2021-08-12 10:53:23 -04:00
.Shadow::after
{
transform: rotateX(90deg) translateY(-80px) translateZ(12px);
box-shadow: 0px 80px 60px black, 0px 80px 20px black;
display: block;
position: absolute;
top: 100%;
content: " ";
width: 100%;
height: 29px;
border-radius: 39px;
}
2021-08-11 13:29:50 -04:00
< / style >
2021-08-11 17:33:00 -04:00
< div class = "Shot" >
< div class = "Table" show = "cover" >
< div class = "Book" >
2021-08-12 09:27:43 -04:00
< img style = "display:block; height:100%; width:auto;" src = "http://placekitten.com/20/200" / >
2021-08-12 10:53:23 -04:00
< div class = "Spine Shadow" >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Cover Front Shadow" > < img src = "book-panel-cover.jpg" / > < img src = "book-panel-cover.jpg" / > < / div > < / div >
2021-08-12 09:27:43 -04:00
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Page" > < img src = "book-page-devo-1.JPG" / > < img src = "http://via.placeholder.com/120x200.jpg?Text=RIGHT" / > < / div > < / div >
2021-08-12 10:53:23 -04:00
< div class = "Spine__Glue" swing = "closed" > < div class = "Panel Cover Back Shadow" > < img src = "book-panel-cover.jpg" / > < img src = "book-panel-cover.jpg" / > < / div > < / div >
2021-08-11 17:33:00 -04:00
< / div >
2021-08-11 17:13:04 -04:00
< / div >
2021-08-11 13:29:50 -04:00
< / div >
2021-08-11 09:35:40 -04:00
< / div >
2021-08-10 16:53:55 -04:00
2021-08-11 17:33:00 -04:00
< div >
< button onclick = "bookPose('cover'); bookClose();" > Cover< / button >
< button onclick = "bookPose('spine'); bookClose();" > Spine< / button >
< button onclick = "bookPose('back'); bookClose();" > Back< / button >
< button onclick = "bookPose('pages'); bookOpen(3);" > 0< / button >
< button onclick = "bookPose('pages'); bookOpen(4);" > 1< / button >
< button onclick = "bookPose('pages'); bookOpen(5);" > 2< / button >
< button onclick = "bookPose('pages'); bookOpen(6);" > 3< / button >
< button onclick = "bookPose('pages'); bookOpen(7);" > 4< / button >
< / div >
2021-08-11 09:35:40 -04:00
< / main >
2021-08-10 16:53:55 -04:00
< script >
2021-08-11 17:33:00 -04:00
let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]");
let table = $(".Table")[0];
let bookOpen = index =>
{
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
};
let bookClose = () =>
{
pages.forEach(p=>p.setAttribute("swing", "closed"));
};
let bookPose = inPanel =>
{
table.setAttribute("show", inPanel);
bookClose();
};
2021-08-10 16:53:55 -04:00
< / script >
< / body >
< / html >
