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

correct states

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-11 17:33:00 -04:00
parent fe18e2ade1
commit cb48e2edc0
1 changed files with 68 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
index.html
View File

@ -2,45 +2,13 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style>
figure
{
width:500px;
height:500px;
transform: perspective(400px);
transform-style: preserve-3d;
}
.Sheet
{
display:block;
width:120px;
height:200px;
border:2px solid black;
position:relative;
transform:rotateY(45deg);
transform-style: preserve-3d;
transform-origin: left center;
}
.Sheet img
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
}
.Sheet img:last-child
{
transform: rotateY(180deg);
}
</style>
</head> </head>
<body> <body>
<main> <main>
<style> <style>
.Table .Shot
{ {
transform: perspective(400px); transform: perspective(400px);
transform-style: preserve-3d; transform-style: preserve-3d;
@ -49,9 +17,21 @@ figure
margin:20px auto 0 auto; margin:20px auto 0 auto;
text-align:center; text-align:center;
} }
.Table
{
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(115deg); }
.Table[show="pages"]{ transform:rotateY(-180deg) translateZ(-150px); }
.Book .Book
{ {
transform: rotateY(-75deg) translateY(50%) translateZ(60px); transform: translateY(50%) translateZ(60px);
transform-style: preserve-3d; transform-style: preserve-3d;
position: relative; position: relative;
display:inline-block; display:inline-block;
@ -70,15 +50,15 @@ figure
.Spine__Glue .Spine__Glue
{ {
flex:0; flex:0;
width:1px; width:0;
height:100%; height:100%;
position:relative; position:relative;
transform:rotateY(90deg); transform:rotateY(90deg);
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.4s; transition: transform 0.4s;
} }
.Spine__Glue[swing='right']{transform: rotateY( 5deg );} .Spine__Glue[swing='right']{transform: rotateY( 20deg );}
.Spine__Glue[swing='left' ]{transform: rotateY( 175deg );} .Spine__Glue[swing='left' ]{transform: rotateY( 160deg );}
.Panel .Panel
{ {
height:100%; height:100%;
@ -86,6 +66,9 @@ figure
float:left; float:left;
position:relative; position:relative;
} }
.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%)}
.Panel.Page .Panel.Page
{ {
height:98%; height:98%;
@ -128,22 +111,59 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
} }
</style> </style>
<div class="Table"> <div class="Shot">
<div class="Book"> <div class="Table" show="cover">
<img style="display:block;" src="http://placekitten.com/50/200"/> <div class="Book">
<div class="Spine"> <img style="display:block;" src="http://placekitten.com/20/200"/>
<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">
<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" swing="closed"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://placekitten.com/120/200"/></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" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></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" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></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 class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://placekitten.com/120/200"/></div></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<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>
</main> </main>
<script> <script>
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();
};
</script> </script>
</body> </body>
</html> </html>