diff --git a/index.html b/index.html index 19d2f22..d0199e2 100644 --- a/index.html +++ b/index.html @@ -42,59 +42,67 @@ width:100%; height:100%; } - .Spine__Glue - { - flex:0; - width:0; - height:100%; - position:relative; - transform:rotateY(-90deg); - transform-style: preserve-3d; - transition: transform 0.8s; - } - .Spine__Glue[swing='right']{transform: translateX(-3px) rotateY( -20deg );} - .Spine__Glue[swing='left' ]{transform: translateX( 3px) rotateY( -160deg );} - .Panel - { - height:100%; - top:0%; - float:left; - position:relative; - } - .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 + .Page { - height:98%; - top:1%; - transform:translateX(1px); - transform-style:preserve-3d; + display: inline-block; + position: relative; + transition: transform 1s; + transform-style: preserve-3d; } - .Panel img - { - display:block; - position:relative; - z-index:1; - height:100%; - width:auto; - backface-visibility: visible; - transform: rotateY(180deg); - } - .Panel img:last-child + .Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); } + .Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); } + .Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); } + .Page .Front, .Page .Back { + float:left; position:absolute; 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); + } + .Page .Back + { transform: rotateY(0deg); } - .Panel.Flip + .Page img { - transform-style:preserve-3d; - transform:rotateY(180deg); + height:100%; + width:auto; } - .Shadow-Sheet-Before::before, .Shadow-Sheet-After::after + + .Page--Fill + { + display: block; + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + } + .Page--Shrink + { + height:98%; + top:1%; + } + .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:" "; @@ -111,24 +119,14 @@ height:100%; backface-visibility: hidden; + transform:scaleX(-1); } - .Shadow-Sheet-Before::before + .Shadow--Sheet--Flip::after { - transform:rotateY(180deg) scaleX(-1); + transform:scaleX(1); } - .Shadow-Drop-After::after, .Shadow-Drop-Before::before - { - transform: rotateX(90deg) translateY(-100px) translateZ(12px); - box-shadow: 0px 100px 60px black, 0px 100px 20px black; - display: block; - position: absolute; - top: 100%; - content: " "; - width: 100%; - height: 29px; - border-radius: 39px; - } - .Shadow-Radiosity-Before::before, .Shadow-Radiosity-After::after + + .Shadow--Radiosity::after { content: " "; background-size: 100% 100%; @@ -146,25 +144,21 @@