correct states
This commit is contained in:
parent
fe18e2ade1
commit
cb48e2edc0
112
index.html
112
index.html
@ -2,45 +2,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<style>
|
||||
.Table
|
||||
.Shot
|
||||
{
|
||||
transform: perspective(400px);
|
||||
transform-style: preserve-3d;
|
||||
@ -49,9 +17,21 @@ figure
|
||||
margin:20px auto 0 auto;
|
||||
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
|
||||
{
|
||||
transform: rotateY(-75deg) translateY(50%) translateZ(60px);
|
||||
transform: translateY(50%) translateZ(60px);
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
display:inline-block;
|
||||
@ -70,15 +50,15 @@ figure
|
||||
.Spine__Glue
|
||||
{
|
||||
flex:0;
|
||||
width:1px;
|
||||
width:0;
|
||||
height:100%;
|
||||
position:relative;
|
||||
transform:rotateY(90deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.Spine__Glue[swing='right']{transform: rotateY( 5deg );}
|
||||
.Spine__Glue[swing='left' ]{transform: rotateY( 175deg );}
|
||||
.Spine__Glue[swing='right']{transform: rotateY( 20deg );}
|
||||
.Spine__Glue[swing='left' ]{transform: rotateY( 160deg );}
|
||||
.Panel
|
||||
{
|
||||
height:100%;
|
||||
@ -86,6 +66,9 @@ figure
|
||||
float:left;
|
||||
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
|
||||
{
|
||||
height:98%;
|
||||
@ -128,22 +111,59 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="Table">
|
||||
<div class="Shot">
|
||||
<div class="Table" show="cover">
|
||||
<div class="Book">
|
||||
<img style="display:block;" src="http://placekitten.com/50/200"/>
|
||||
<img style="display:block;" src="http://placekitten.com/20/200"/>
|
||||
<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 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>
|
||||
<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 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 Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://placekitten.com/120/200"/></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 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>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user