Book Css1/ 2

css

* { box-sizing: border-box; } /* FlipBook */ body { /* or any other parent wrapper */ margin: 0; display: flex; min-height: 100dvh; perspective: 1000px; font: 1em/1.4 "Poppins", sans-serif; overflow: hidden; color: hsl(180 68% 5%); background-image: radial-gradient(circle farthest-corner at 50% 50%, hsl(187 20% 88%) 30%, hsl(149 20% 94%) 100%); } .book { position: relative; display: flex; margin: auto; width: 60cqmin; /*1* let pointer event go trough pages of lower Z than .book */ pointer-events: none; transform-style: preserve-3d; transition: translate 1s; translate: calc(min(var(--c), 1) * 50%) 0%; /* Incline on the X axis for pages preview */ rotate: 1 0 0 5deg; } .page { /* PS: Don't go below thickness 0.5 or the pages might transpare */ --thickness: 4; flex: none; display: flex; width: 100%; font-size: 2cqmin; /*1* allow pointer events on pages */ pointer-events: all; user-select: none; transform-style: preserve-3d; transform-origin: left center; transition: transform 1s, rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms); translate: calc(var(--i) * -100%) 0px 0px; transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * .23cqmin))); rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg); } .front, .back { position: relative; flex: none; width: 100%; backface-visibility: hidden; overflow: hidden; background-color: #fff; /* Fix backface visibility Firefox: */ translate: 0px; } .back { translate: -100% 0; rotate: 0 1 0 180deg; } /* That's it. Your FlipBook customization styles: */ .book { counter-reset: page -1; & a { color: inherit; } } .page { box-shadow: 0em .5em 1em -.2em #00000020; aspect-ratio: 0.8; } .front, .back { display: flex; flex-flow: column wrap; justify-content: space-between; padding: 2em; border: 1px solid #0002; &:has(img) { padding: 0; } & img { width: 100%; height: 100%; object-fit: cover; } &::after { position: absolute; bottom: 1em; counter-increment: page; content: counter(page) "."; font-size: 0.8em; } } .cover { &::after { content: ""; } } .front { &::after { right: 1em; } background: linear-gradient(to left, #f7f7f7 80%, #eee 100%); border-radius: .1em .5em .5em .1em; } .back { &::after { left: 1em; } background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%); border-radius: .5em .1em .1em .5em; } .cover { background: radial-gradient(circle farthest-corner at 80% 20%, hsl(150 80% 20% / .3) 0%, hsl(170 60% 10% / .1) 100%), hsl(231, 32%, 29%) url("https://picsum.photos/id/984/800/900") 50% / cover; color: hsl(200 30% 98%); }