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

camera tweaks

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-12 18:14:47 -04:00
parent e5c1adf5e4
commit f1eeab5557
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -18,10 +18,10 @@
text-align:center; text-align:center;
transition: transform 1s; transition: transform 1s;
} }
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); } .Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); } .Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); } .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
.Shot[show="pages"]{ transform: perspective(800px) rotateY(0deg); } .Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); }
.Book .Book
{ {
@ -60,7 +60,6 @@
top:0; top:0;
left:0; left:0;
height:100%; height:100%;
box-shadow: 0px -1px 1px rgb(0 0 0 / 30%);
backface-visibility: hidden; backface-visibility: hidden;
transform-style: preserve-3d; transform-style: preserve-3d;
transform: rotateY(180deg); transform: rotateY(180deg);
@ -91,15 +90,15 @@
} }
.Shadow--Drop::before .Shadow--Drop::before
{ {
transform: rotateX(90deg); transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
backface-visibility: visible; box-shadow: 0px 100px 60px black, 0px 100px 17px black;
display: block;
position: absolute; position: absolute;
top: 100%; top: 100%;
content: " "; content: " ";
display: block;
width: 100%; width: 100%;
height: 50px; height: 8px;
background: #000; border-radius: 39px;
} }
.Shadow--Sheet::after .Shadow--Sheet::after
@ -145,18 +144,18 @@
<div class="Shot" show="cover"> <div class="Shot" show="cover">
<div class="Book"> <div class="Book">
<img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/> <img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/>
<div class="Page Page--Fill"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div> <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
<div class="Spine"> <div class="Spine">
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div> <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
</div> </div>
</div> </div>