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

remove table

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-12 11:02:17 -04:00
parent b00b2712c3
commit 52cf5f024d
1 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -16,24 +16,18 @@
height: 400px;
margin:20px auto 0 auto;
text-align:center;
}
.Table
{
height:100%;
transform:rotateY(-70deg);
transform-style: preserve-3d;
transition: transform 1s;
}
.Table[show="cover"]{ transform:rotateY(-70deg); }
.Table[show="spine"]{ transform:rotateY(-10deg); }
.Table[show="back" ]{ transform:rotateY(-235deg); }
.Table[show="pages"]{ transform:rotateY(-180deg); }
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(-70deg); }
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(-10deg); }
.Shot[show="back" ]{ transform: perspective(1000px) rotateY(-235deg); }
.Shot[show="pages"]{ transform: perspective(1000px) rotateY(-180deg); }
.Book
{
height:100%;
transform-style: preserve-3d;
transform: translateZ(100px);
position: relative;
display:inline-block;
}
@ -112,8 +106,8 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
}
.Shadow::after
{
transform: rotateX(90deg) translateY(-80px) translateZ(12px);
box-shadow: 0px 80px 60px black, 0px 80px 20px black;
transform: rotateX(90deg) translateY(-100px) translateZ(12px);
box-shadow: 0px 100px 60px black, 0px 100px 20px black;
display: block;
position: absolute;
top: 100%;
@ -125,26 +119,24 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
</style>
<div class="Shot">
<div class="Table" show="cover">
<div class="Book">
<img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
<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>
<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>
<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>
</div>
<div class="Book">
<img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
<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>
<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>
<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>
</div>
</div>
</div>
@ -163,7 +155,7 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
<script>
let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]");
let table = $(".Table")[0];
let table = $(".Shot")[0];
let bookOpen = index =>
{
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );