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

dynamic size

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-12 09:27:43 -04:00
parent cb48e2edc0
commit 1148549159
7 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
book-page-devo-1.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
book-page-devo-2.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
book-page-intro-left.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
book-page-intro-right.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
book-panel-back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
book-panel-cover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

41
index.html
View File

@ -10,7 +10,7 @@
<style> <style>
.Shot .Shot
{ {
transform: perspective(400px); transform: perspective(1000px);
transform-style: preserve-3d; transform-style: preserve-3d;
width:500px; width:500px;
height: 400px; height: 400px;
@ -19,19 +19,20 @@
} }
.Table .Table
{ {
height:100%;
transform:rotateY(-70deg); transform:rotateY(-70deg);
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 1s; transition: transform 1s;
} }
.Table[show="cover"]{ transform:rotateY(-70deg); } .Table[show="cover"]{ transform:rotateY(-70deg); }
.Table[show="spine"]{ transform:rotateY(-10deg); } .Table[show="spine"]{ transform:rotateY(-10deg); }
.Table[show="back" ]{ transform:rotateY(115deg); } .Table[show="back" ]{ transform:rotateY(-235deg); }
.Table[show="pages"]{ transform:rotateY(-180deg) translateZ(-150px); } .Table[show="pages"]{ transform:rotateY(-180deg); }
.Book .Book
{ {
transform: translateY(50%) translateZ(60px); height:100%;
transform-style: preserve-3d; transform-style: preserve-3d;
position: relative; position: relative;
display:inline-block; display:inline-block;
@ -114,23 +115,23 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
<div class="Shot"> <div class="Shot">
<div class="Table" show="cover"> <div class="Table" show="cover">
<div class="Book"> <div class="Book">
<img style="display:block;" src="http://placekitten.com/20/200"/> <img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
<div class="Spine"> <div class="Spine">
<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 Cover Front"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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="book-page-devo-1.JPG"/><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 class="Spine__Glue" swing="closed"><div class="Panel Cover Back"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
</div> </div>
</div> </div>
</div> </div>