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

24
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,7 +119,6 @@ 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">
@ -147,7 +140,6 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
</div>
</div>
</div>
</div>
<div>
<button onclick="bookPose('cover'); bookClose();">Cover</button>
@ -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") );