From 9ae3610e6217324204bc9a73279a86525d3cd077 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Wed, 11 Aug 2021 13:29:50 -0400
Subject: [PATCH] Book CSS

---
 index.html | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 85 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 3546c57..c2e102d 100644
--- a/index.html
+++ b/index.html
@@ -39,12 +39,93 @@ figure
 <body>
 <main>
 
-    <div style="display:flex; justify-content:space-between; width:50px; height:200px;">
-        <div style="flex:0; width:1px; height:100%; border:1px solid blue; position:relative;"><div style="float:left;"><img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/></div></div>
-        <div style="flex:0; width:1px; height:100%; border:1px solid blue; position:relative;"><div style="float:left;"><img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/></div></div>
-        <div style="flex:0; width:1px; height:100%; border:1px solid blue; position:relative;"><div style="float:left;"><img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/></div></div>
+    <style>
+        .Book
+        {
+            transform: perspective(400px);
+            transform-style: preserve-3d;
+        }
+        .Spine
+        {
+            display:flex;
+            justify-content:space-between;
+            width:50px;
+            height:200px;
+            margin:0 auto;
+        }
+        .Spine__Glue
+        {
+            flex:0;
+            width:1px;
+            height:100%;
+            border:1px solid blue;
+            position:relative;
+            transform:rotateY(0deg);
+            transform-style: preserve-3d;
+        }
+        .Panel
+        {
+            height:100%;
+            top:0%;
+            float:left;
+            position:relative;
+        }
+        .Panel.Page
+        {
+            height:98%;
+            top:1%;
+        }
+        .Panel img
+        {
+            display:block;
+            height:100%;
+            width:auto;
+            backface-visibility: hidden;
+        }
+        .Panel img:last-child
+        {
+            position:absolute;
+            top:0;
+            left:0;
+            transform: rotateY(180deg);
+        }
+        .Panel::before, .Panel::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;
+            top:0;
+            left:0;
+            width:100%;
+            height:100%;
+
+            backface-visibility: hidden;
+        }
+        .Panel::after
+        {
+            transform:rotateY(180deg) scaleX(-1);
+        }
+
+
+
+    </style>
+
+    <div class="Book">
+        <div class="Spine">
+            <div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+            <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+            <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+            <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+            <div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+        </div>
     </div>
 
+
     <div style="float:left; width:20px; height:200px; border:1px solid blue;">
         <div style="float:left;">
             <img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
