diff --git a/index.html b/index.html index ee9a665..9499a8f 100644 --- a/index.html +++ b/index.html @@ -16,24 +16,18 @@ height: 400px; margin:20px auto 0 auto; text-align:center; - } - .Table - { - height:100%; - transform:rotateY(-70deg); - transform-style: preserve-3d; transition: transform 1s; } - .Table[show="cover"]{ transform:rotateY(-70deg); } - .Table[show="spine"]{ transform:rotateY(-10deg); } - .Table[show="back" ]{ transform:rotateY(-235deg); } - .Table[show="pages"]{ transform:rotateY(-180deg); } - + .Shot[show="cover"]{ transform: perspective(1000px) rotateY(-70deg); } + .Shot[show="spine"]{ transform: perspective(1000px) rotateY(-10deg); } + .Shot[show="back" ]{ transform: perspective(1000px) rotateY(-235deg); } + .Shot[show="pages"]{ transform: perspective(1000px) rotateY(-180deg); } .Book { height:100%; transform-style: preserve-3d; + transform: translateZ(100px); position: relative; display:inline-block; } @@ -112,8 +106,8 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75 } .Shadow::after { - transform: rotateX(90deg) translateY(-80px) translateZ(12px); - box-shadow: 0px 80px 60px black, 0px 80px 20px black; + transform: rotateX(90deg) translateY(-100px) translateZ(12px); + box-shadow: 0px 100px 60px black, 0px 100px 20px black; display: block; position: absolute; top: 100%; @@ -125,26 +119,24 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75