CSS-animiertes Magazin mit 16 SeitenCSS snippet

.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);
}

<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>