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

Table convention

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-11 17:13:04 -04:00
parent 9ae3610e62
commit fe18e2ade1
1 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@ -40,29 +40,45 @@ figure
<main> <main>
<style> <style>
.Book .Table
{ {
transform: perspective(400px); transform: perspective(400px);
transform-style: preserve-3d; transform-style: preserve-3d;
width:500px;
height: 400px;
margin:20px auto 0 auto;
text-align:center;
}
.Book
{
transform: rotateY(-75deg) translateY(50%) translateZ(60px);
transform-style: preserve-3d;
position: relative;
display:inline-block;
} }
.Spine .Spine
{ {
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
width:50px;
height:200px;
margin:0 auto; margin:0 auto;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
} }
.Spine__Glue .Spine__Glue
{ {
flex:0; flex:0;
width:1px; width:1px;
height:100%; height:100%;
border:1px solid blue;
position:relative; position:relative;
transform:rotateY(0deg); transform:rotateY(90deg);
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.4s;
} }
.Spine__Glue[swing='right']{transform: rotateY( 5deg );}
.Spine__Glue[swing='left' ]{transform: rotateY( 175deg );}
.Panel .Panel
{ {
height:100%; height:100%;
@ -110,12 +126,11 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
{ {
transform:rotateY(180deg) scaleX(-1); transform:rotateY(180deg) scaleX(-1);
} }
</style> </style>
<div class="Table">
<div class="Book"> <div class="Book">
<img style="display:block;" src="http://placekitten.com/50/200"/>
<div class="Spine"> <div class="Spine">
<div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div> <div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
<div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div> <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
@ -124,29 +139,8 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
<div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div> <div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
</div> </div>
</div> </div>
</div>
<div style="float:left; width:20px; height:200px; border:1px solid blue;">
<div style="float:left;">
<img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
</div>
</div>
<div style="float:left; width:20px; height:200px; border:1px solid blue;">
<div style="float:left;">
<img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
</div>
</div>
<div style="clear:left;"></div>
<figure>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
</figure>
</main> </main>
<script> <script>