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

test page for problems

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-12 16:37:02 -04:00
parent e3bb654be6
commit 89116fef56
1 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
problem.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<style>
.Shot
{
transform: perspective(1000px);
transform-style: preserve-3d;
width:500px;
height: 400px;
margin:20px auto 0 auto;
text-align:center;
transition: transform 1s;
}
.Shot[show="front"]{ transform: perspective(1000px) rotateY(0deg); }
.Shot[show="back"] { transform: perspective(1000px) rotateY(180deg); }
.Page
{
display: inline-block;
position: relative;
border:20px solid red;
transition: transform 1s;
transform-style: preserve-3d;
}
.Page .Front, .Page .Back
{
float:left;
position:absolute;
top:0;
left:0;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.Page .Back
{
transform: rotateY(180deg);
}
.Page img
{
max-width:300px;
max-height:300px;
}
.Shadow--Drop::before
{
transform: rotateX(90deg);
backface-visibility: visible;
position: absolute;
top: 100%;
content: " ";
display: block;
width: 100%;
height: 50px;
background: #000;
}
.Shadow--Sheet::after
{
content:" ";
background-size: 100% 100%;
background-position: 0px 0px;
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
display:block;
position:absolute;
z-index:100;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
}
.Shadow--Sheet--Flip::after
{
transform:scaleX(-1);
}
</style>
<div>
<button onclick="bookPose('front')">Front</button>
<button onclick="bookPose('back') ">Back </button>
</div>
<div class="Shot" show="cover">
<div class="Page">
<div class="Front Shadow--Sheet">
<img src="book-page-1.jpg" />
</div>
<div class="Back Shadow--Sheet Shadow--Sheet--Flip Shadow--Drop">
<img src="book-page-2.jpg" />
</div>
</div>
</div>
<div>
</div>
</main>
<script>
let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]");
let table = $(".Shot")[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>