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;
transition: transform 1s;
}
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); }
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); }
.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
.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
{
@ -60,7 +60,6 @@
top:0;
left:0;
height:100%;
box-shadow: 0px -1px 1px rgb(0 0 0 / 30%);
backface-visibility: hidden;
transform-style: preserve-3d;
transform: rotateY(180deg);
@ -91,15 +90,15 @@
}
.Shadow--Drop::before
{
transform: rotateX(90deg);
backface-visibility: visible;
transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
box-shadow: 0px 100px 60px black, 0px 100px 17px black;
display: block;
position: absolute;
top: 100%;
content: " ";
display: block;
width: 100%;
height: 50px;
background: #000;
height: 8px;
border-radius: 39px;
}
.Shadow--Sheet::after
@ -145,18 +144,18 @@
<div class="Shot" show="cover">
<div class="Book">
<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="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-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" 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 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>
</div>