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