CSS-animiertes Magazin mit 16 SeitenCSS snippet
Die responsive CSS-Broschüre hat 16 Seiten (Bilder). Das Seitenformat ist 3:4, kann aber beliebig angepasst werden.
Broschüre ausprobieren
















Der Code
CSS
Mit SCSS und Co. kann der Code natürlich extrem gekürzt werden... aber hier gibt es nur CSS ;-)
.brochure .container { width: 100%; max-width:500px; height:100%; aspect-ratio: 1.5; position: relative; margin: 0 auto; perspective: 2800px; overflow:visible; } .brochure img { max-width:100%; height:auto; } .brochure input{ display:none; } [class^="brochure-page"]{ transform-style: preserve-3d; transition: transform 1s; position: absolute; top:0; width:50%; aspect-ratio: 0.75; } /*------------1f------------*/ .brochure-page1{ left:50%; transform-origin: left; } [id^=flip1]:not(:checked) ~ .brochure-page1 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:1; } [id^=flip1]:checked ~ .brochure-page1{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:1; } /*------------1f------------*/ /*------------2b------------*/ .brochure-page2{ left:0; transform-origin: right; } [id^=flip1]:not(:checked) ~ .brochure-page2 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:1; } [id^=flip1]:checked ~ .brochure-page2{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:1; } /*------------2b------------*/ /*------------3f------------*/ .brochure-page3{ left:50%; transform-origin: left; } [id^=flip2]:not(:checked) ~ .brochure-page3 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:1; } [id^=flip2]:checked ~ .brochure-page3{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:1; } /*------------3f------------*/ /*------------4b------------*/ .brochure-page4{ left:0; transform-origin: right; } [id^=flip2]:not(:checked) ~ .brochure-page4 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:2; } [id^=flip2]:checked ~ .brochure-page4{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:2; } /*------------4b------------*/ /*------------5f------------*/ .brochure-page5{ left:50%; transform-origin: left; } [id^=flip3]:not(:checked) ~ .brochure-page5 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:1; } [id^=flip3]:checked ~ .brochure-page5{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:1; } /*------------5f------------*/ /*------------6b------------*/ .brochure-page6{ left:0; transform-origin: right; } [id^=flip3]:not(:checked) ~ .brochure-page6 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:3; } [id^=flip3]:checked ~ .brochure-page6{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:3; } /*------------6b------------*/ /*------------7f------------*/ .brochure-page7{ left:50%; transform-origin: left; } [id^=flip4]:not(:checked) ~ .brochure-page7 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:1; } [id^=flip4]:checked ~ .brochure-page7{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:1; } /*------------7f------------*/ /*------------8b------------*/ .brochure-page8{ left:0; transform-origin: right; } [id^=flip4]:not(:checked) ~ .brochure-page8 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:4; } [id^=flip4]:checked ~ .brochure-page8{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:4; } /*------------8b------------*/ /*------------9f------------*/ .brochure-page9{ left:50%; transform-origin: left; } [id^=flip5]:not(:checked) ~ .brochure-page9 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:1; } [id^=flip5]:checked ~ .brochure-page9{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:0; } /*------------9f------------*/ /*------------10b------------*/ .brochure-page10{ left:0; transform-origin: right; } [id^=flip5]:not(:checked) ~ .brochure-page10 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:5; } [id^=flip5]:checked ~ .brochure-page10{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:5; } /*------------10b------------*/ /*------------11f------------*/ .brochure-page11{ left:50%; transform-origin: left; } [id^=flip6]:not(:checked) ~ .brochure-page11 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:0; } [id^=flip6]:checked ~ .brochure-page11{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:0; } /*------------11f------------*/ /*------------12b------------*/ .brochure-page12{ left:0; transform-origin: right; } [id^=flip6]:not(:checked) ~ .brochure-page12 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:6; } [id^=flip6]:checked ~ .brochure-page12{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:6; } /*------------12b------------*/ /*------------13f------------*/ .brochure-page13{ left:50%; transform-origin: left; } [id^=flip7]:not(:checked) ~ .brochure-page13 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:0; } [id^=flip7]:checked ~ .brochure-page13{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:0; } /*------------13f------------*/ /*------------14b------------*/ .brochure-page14{ left:0; transform-origin: right; } [id^=flip7]:not(:checked) ~ .brochure-page14 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:7; } [id^=flip7]:checked ~ .brochure-page14{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:7; } /*------------14b------------*/ /*------------15f------------*/ .brochure-page15{ left:50%; transform-origin: left; } [id^=flip8]:not(:checked) ~ .brochure-page15 { transform:rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:0; } [id^=flip8]:checked ~ .brochure-page15{ transform: rotateY(-90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:0; } /*------------15f------------*/ /*------------16b------------*/ .brochure-page16{ left:0; transform-origin: right; } [id^=flip8]:not(:checked) ~ .brochure-page16 { transform: rotateY(90deg) ; transform-style: preserve-3d; transition: transform 1s; z-index:8; } [id^=flip8]:checked ~ .brochure-page16{ transform: rotateY(0deg) ; transform-style: preserve-3d; transition: transform 1s; transition-delay: 1s; z-index:8; } /*------------16b------------*/ #flip1 { position:absolute; top:-20px; left:20px; z-index:1000; } #flip2 { position:absolute; top:-20px; left:40px; z-index:1000; } #flip3 { position:absolute; top:-20px; left:60px; z-index:1000; } #flip4 { position:absolute; top:-20px; left:80px; z-index:1000; } #flip5 { position:absolute; top:-20px; left:100px; z-index:1000; } #flip6 { position:absolute; top:-20px; left:120px; z-index:1000; } #flip7 { position:absolute; top:-20px; left:140px; z-index:1000; } #flip8 { position:absolute; top:-20px; left:160px; z-index:1000; } .brochure-page1 img,.brochure-page3 img,.brochure-page5 img,.brochure-page7 img { box-shadow: 3px 0 5px rgba(0,0,0,0.1); } .brochure-page2 img,.brochure-page4 img,.brochure-page6 img,.brochure-page8 img { box-shadow: -3px 0 5px rgba(0,0,0,0.1); } .brochure label{ display:block; text-align:center; position:absolute; bottom:50%; } .brochure .back { left:1%; padding: 3px 5px 1px 0px; } .brochure .front { right:1%; padding: 3px 0px 1px 5px; } .brochure .back,.brochure .front { padding: 3px 0 1px 0; background-color:rgba(255,255,255,1); font-size:30px; color:#eaeaea; border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); opacity:0.7; } .brochure .back:hover, .brochure .front:hover { transition: color 0.5s; color:rgba(0,0,0,0.5); }
HTML
<div class="brochure"> <div class="container"> <input type="checkbox" id="flip8" /> <div class="brochure-page15"> <label class="front" for="flip8">►</label> <img src="brochure/page-15.jpg" /> </div> <div class="brochure-page16"> <label class="back" for="flip8">◄</label> <img src="brochure/page-16.jpg" /> </div> <input type="checkbox" id="flip7"/> <div class="brochure-page13"> <label class="front" for="flip7">►</label> <img src="brochure/page-13.jpg"/> </div> <div class="brochure-page14"> <label class="back" for="flip7">◄</label> <img src="brochure/page-14.jpg"/> </div> <input type="checkbox" id="flip6"/> <div class="brochure-page11"> <label class="front" for="flip6">►</label> <img src="brochure/page-11.jpg"/> </div> <div class="brochure-page12"> <label class="back" for="flip6">◄</label> <img src="brochure/page-12.jpg"/> </div> <input type="checkbox" id="flip5"/> <div class="brochure-page9"> <label class="front" for="flip5">►</label> <img src="brochure/page-9.jpg"/> </div> <div class="brochure-page10"> <label class="back" for="flip5">◄</label> <img src="brochure/page-10.jpg"/> </div> <input type="checkbox" id="flip4"/> <div class="brochure-page7"> <label class="front" for="flip4">►</label> <img src="brochure/page-7.jpg"/> </div> <div class="brochure-page8"> <label class="back" for="flip4">◄</label> <img src="brochure/page-8.jpg"/> </div> <input type="checkbox" id="flip3"/> <div class="brochure-page5"> <label class="front" for="flip3">►</label> <img src="brochure/page-5.jpg"/> </div> <div class="brochure-page6"> <label class="back" for="flip3">◄</label> <img src="brochure/page-6.jpg"/> </div> <input type="checkbox" id="flip2"/> <div class="brochure-page3"> <label class="front" for="flip2">►</label> <img src="brochure/page-3.jpg"/> </div> <div class="brochure-page4"> <label class="back" for="flip2">◄</label> <img src="brochure/page-4.jpg"/> </div> <input type="checkbox" id="flip1"/> <div class="brochure-page2"> <label class="back" for="flip1">◄</label> <img src="brochure/page-2.jpg"/> </div> <div class="brochure-page1"> <label class="front" for="flip1">►</label> <img src="brochure/page-1.jpg"/> </div> </div> </div>