Jump directly to the main navigation Jump directly to content

Digital brochure to browse throughCSS snippet

The responsive CSS brochure for browsing has 16 pages (images). The page format is 3:4, but can be adjusted as desired.

See how it works

Get the code

CSS

With SCSS and Co. the code can of course be shortened extremely... but here there is only 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>

Files

download image files (zip, 359 kb)
back to top