From e3bb654be64f0081ccd447c9bc3f74286444e901 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 12 Aug 2021 15:30:14 -0400
Subject: [PATCH] trying to resolve sorting issues

---
 index.html | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 8366f5a..19d2f22 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,8 @@
         }
         .Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); }
         .Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); }
-        .Shot[show="back" ]{ transform: perspective(1000px) rotateY(-60deg); }
-        .Shot[show="pages"]{ transform: perspective(1000px) rotateY(0deg); }
+        .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
+        .Shot[show="pages"]{ transform: perspective(800px) rotateY(0deg); }
 
         .Book
         {
@@ -61,27 +61,38 @@
             float:left;
             position:relative;
         }
-        .Spine__Glue[swing='right'] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
-        .Spine__Glue[swing='left' ] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
+        .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%)}
 
         .Panel.Page
         {
             height:98%;
             top:1%;
+            transform:translateX(1px);
+            transform-style:preserve-3d;
         }
         .Panel img
         {
             display:block;
+            position:relative;
+            z-index:1;
             height:100%;
             width:auto;
-            backface-visibility: hidden;
+            backface-visibility: visible;
+            transform: rotateY(180deg);
         }
         .Panel img:last-child
         {
             position:absolute;
             top:0;
             left:0;
-            transform: rotateY(180deg);
+            backface-visibility: hidden;
+            transform: rotateY(0deg);
+        }
+        .Panel.Flip
+        {
+            transform-style:preserve-3d;
+            transform:rotateY(180deg);
         }
         .Shadow-Sheet-Before::before, .Shadow-Sheet-After::after
         {
@@ -93,6 +104,7 @@
 
             display:block;
             position:absolute;
+            z-index:100;
             top:0;
             left:0;
             width:100%;
@@ -100,7 +112,7 @@
 
             backface-visibility: hidden;
         }
-        .Panel::after
+        .Shadow-Sheet-Before::before
         {
             transform:rotateY(180deg) scaleX(-1);
         }
@@ -126,6 +138,7 @@
             position: absolute;
             bottom: 0;
             left: 0;
+            z-index:100;
             width: 100%;
             height: 100%;
         }
@@ -133,7 +146,7 @@
 
     <div class="Shot" show="cover">
         <div class="Book">
-            <img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
+            
             <div class="Spine Shadow-Radiosity-Before Shadow-Drop-After">
                 <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>
                 <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>
@@ -149,18 +162,19 @@
                 <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 Shadow-Radiosity-After Shadow-Drop-Before"><img src="book-panel-back.jpg"/><img src="book-panel-back.jpg"/></div></div>
+                <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>
             </div>
+            <img style="display:block; height:100%; width:auto; transform:scaleX(-1);" src="book-panel-spine.jpg"/>
         </div>
     </div>
 
     <div>
-        <button onclick="bookPose('cover'); bookClose();">Cover</button>
+        <button onclick="bookPose('cover'); bookClose();">Front</button>
         <button onclick="bookPose('spine'); bookClose();">Spine</button>
         <button onclick="bookPose('back');  bookClose();">Back</button>
-        <button onclick="bookPose('pages'); bookOpen(3);">0</button>
-        <button onclick="bookPose('pages'); bookOpen(4);">1</button>
-        <button onclick="bookPose('pages'); bookOpen(5);">2</button>
+        <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>
         <button onclick="bookPose('pages'); bookOpen(6);">3</button>
         <button onclick="bookPose('pages'); bookOpen(7);">4</button>
     </div>