<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <main> <style> .Shot { transform: perspective(1000px); transform-style: preserve-3d; width:500px; height: 400px; margin:20px auto 0 auto; text-align:center; transition: transform 1s; } .Shot[show="front"]{ transform: perspective(1000px) rotateY(0deg); } .Shot[show="back"] { transform: perspective(1000px) rotateY(180deg); } .Page { display: inline-block; position: relative; border:20px solid red; transition: transform 1s; transform-style: preserve-3d; } .Page .Front, .Page .Back { float:left; position:absolute; top:0; left:0; backface-visibility: hidden; transform-style: preserve-3d; } .Page .Back { transform: rotateY(180deg); } .Page img { max-width:300px; max-height:300px; } .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:" "; 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; z-index:100; top:0; left:0; width:100%; height:100%; backface-visibility: hidden; } .Shadow--Sheet--Flip::after { transform:scaleX(-1); } </style> <div> <button onclick="bookPose('front')">Front</button> <button onclick="bookPose('back') ">Back </button> </div> <div class="Shot" show="cover"> <div class="Page"> <div class="Front Shadow--Sheet"> <img src="book-page-1.jpg" /> </div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip Shadow--Drop"> <img src="book-page-2.jpg" /> </div> </div> </div> </main> <script> let $ = query => Array.from(document.querySelectorAll(query)); let pages = $("[swing]"); let table = $(".Shot")[0]; let bookOpen = index => { pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") ); }; let bookClose = () => { pages.forEach(p=>p.setAttribute("swing", "closed")); }; let bookPose = inPanel => { table.setAttribute("show", inPanel); bookClose(); }; </script> </body> </html>