SethTrowbridge/css-3d-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
89116fef56
css-3d-book/index.html

201 lines
8.1 KiB
HTML
Raw Normal View History

setup
2021-08-10 16:53:55 -04:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
correct states
2021-08-11 17:33:00 -04:00
spine design
2021-08-11 09:35:40 -04:00
</head>
<body>
<main>
setup
2021-08-10 16:53:55 -04:00
Book CSS
2021-08-11 13:29:50 -04:00
<style>
correct states
2021-08-11 17:33:00 -04:00
.Shot
Book CSS
2021-08-11 13:29:50 -04:00
{
dynamic size
2021-08-12 09:27:43 -04:00
transform: perspective(1000px);
Book CSS
2021-08-11 13:29:50 -04:00
transform-style: preserve-3d;
Table convention
2021-08-11 17:13:04 -04:00
width:500px;
height: 400px;
margin:20px auto 0 auto;
text-align:center;
correct states
2021-08-11 17:33:00 -04:00
transition: transform 1s;
}
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); }
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); }
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
.Shot[show="pages"]{ transform: perspective(800px) rotateY(0deg); }
correct states
2021-08-11 17:33:00 -04:00
Table convention
2021-08-11 17:13:04 -04:00
.Book
{
dynamic size
2021-08-12 09:27:43 -04:00
height:100%;
Table convention
2021-08-11 17:13:04 -04:00
transform-style: preserve-3d;
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
transform: translateZ(-100px);
Table convention
2021-08-11 17:13:04 -04:00
position: relative;
display:inline-block;
Book CSS
2021-08-11 13:29:50 -04:00
}
.Spine
{
display:flex;
justify-content:space-between;
margin:0 auto;
Table convention
2021-08-11 17:13:04 -04:00
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Book CSS
2021-08-11 13:29:50 -04:00
}
.Spine__Glue
{
flex:0;
correct states
2021-08-11 17:33:00 -04:00
width:0;
Book CSS
2021-08-11 13:29:50 -04:00
height:100%;
position:relative;
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
transform:rotateY(-90deg);
Book CSS
2021-08-11 13:29:50 -04:00
transform-style: preserve-3d;
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
transition: transform 0.8s;
Book CSS
2021-08-11 13:29:50 -04:00
}
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
.Spine__Glue[swing='right']{transform: translateX(-3px) rotateY( -20deg );}
.Spine__Glue[swing='left' ]{transform: translateX( 3px) rotateY( -160deg );}
Book CSS
2021-08-11 13:29:50 -04:00
.Panel
{
height:100%;
top:0%;
float:left;
position:relative;
}
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
.Spine__Glue[swing='right'] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
.Spine__Glue[swing='left' ] .Panel {box-shadow:3px 0px 2px rgb(0 0 0 / 24%)}
correct states
2021-08-11 17:33:00 -04:00
Book CSS
2021-08-11 13:29:50 -04:00
.Panel.Page
{
height:98%;
top:1%;
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
transform:translateX(1px);
transform-style:preserve-3d;
Book CSS
2021-08-11 13:29:50 -04:00
}
.Panel img
{
display:block;
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
position:relative;
z-index:1;
Book CSS
2021-08-11 13:29:50 -04:00
height:100%;
width:auto;
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
backface-visibility: visible;
transform: rotateY(180deg);
Book CSS
2021-08-11 13:29:50 -04:00
}
.Panel img:last-child
{
position:absolute;
top:0;
left:0;
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
backface-visibility: hidden;
transform: rotateY(0deg);
}
.Panel.Flip
{
transform-style:preserve-3d;
transform:rotateY(180deg);
Book CSS
2021-08-11 13:29:50 -04:00
}
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
.Shadow-Sheet-Before::before, .Shadow-Sheet-After::after
Book CSS
2021-08-11 13:29:50 -04:00
{
content:" ";
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
background-size: 100% 100%;
background-position: 0px 0px;
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
Book CSS
2021-08-11 13:29:50 -04:00
display:block;
position:absolute;
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
z-index:100;
Book CSS
2021-08-11 13:29:50 -04:00
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
}
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
.Shadow-Sheet-Before::before
Book CSS
2021-08-11 13:29:50 -04:00
{
transform:rotateY(180deg) scaleX(-1);
}
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
.Shadow-Drop-After::after, .Shadow-Drop-Before::before
nice shadows
2021-08-12 10:53:23 -04:00
{
remove table
2021-08-12 11:02:17 -04:00
transform: rotateX(90deg) translateY(-100px) translateZ(12px);
box-shadow: 0px 100px 60px black, 0px 100px 20px black;
nice shadows
2021-08-12 10:53:23 -04:00
display: block;
position: absolute;
top: 100%;
content: " ";
width: 100%;
height: 29px;
border-radius: 39px;
}
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
.Shadow-Radiosity-Before::before, .Shadow-Radiosity-After::after
{
content: " ";
background-size: 100% 100%;
background-position: 0px 0px;
background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
display: block;
position: absolute;
bottom: 0;
left: 0;
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
z-index:100;
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
width: 100%;
height: 100%;
}
Book CSS
2021-08-11 13:29:50 -04:00
</style>
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
<div class="Shot" show="cover">
remove table
2021-08-12 11:02:17 -04:00
<div class="Book">
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
<div class="Spine Shadow-Radiosity-Before Shadow-Drop-After">
spine image
2021-08-12 13:50:26 -04:00
<div class="Spine__Glue" swing="closed"><div class="Panel Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-front.jpg"/><img src="book-panel-front.jpg"/></div></div>
shadow syntax, ordering
2021-08-12 12:34:42 -04:00
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page Shadow-Sheet-Before Shadow-Sheet-After"><img src="book-page-1.jpg"/><img src="book-page-2.jpg"/></div></div>
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
<div class="Spine__Glue" swing="closed"><div class="Panel Flip Shadow-Radiosity-Before Shadow-Drop-After"><img src="book-panel-back.jpg"/><img src="book-panel-back.jpg"/></div></div>
Table convention
2021-08-11 17:13:04 -04:00
</div>
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
<img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
Book CSS
2021-08-11 13:29:50 -04:00
</div>
spine design
2021-08-11 09:35:40 -04:00
</div>
setup
2021-08-10 16:53:55 -04:00
correct states
2021-08-11 17:33:00 -04:00
<div>
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
<button onclick="bookPose('cover'); bookClose();">Front</button>
correct states
2021-08-11 17:33:00 -04:00
<button onclick="bookPose('spine'); bookClose();">Spine</button>
<button onclick="bookPose('back'); bookClose();">Back</button>
trying to resolve sorting issues
2021-08-12 15:30:14 -04:00
<button onclick="bookPose('pages'); bookOpen(3);">Intro</button>
<button onclick="bookPose('pages'); bookOpen(4);">Spread 1</button>
<button onclick="bookPose('pages'); bookOpen(5);">Spread 2</button>
correct states
2021-08-11 17:33:00 -04:00
<button onclick="bookPose('pages'); bookOpen(6);">3</button>
<button onclick="bookPose('pages'); bookOpen(7);">4</button>
</div>
spine design
2021-08-11 09:35:40 -04:00
</main>
setup
2021-08-10 16:53:55 -04:00
<script>
correct states
2021-08-11 17:33:00 -04:00
let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]");
remove table
2021-08-12 11:02:17 -04:00
let table = $(".Shot")[0];
correct states
2021-08-11 17:33:00 -04:00
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();
};
setup
2021-08-10 16:53:55 -04:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink