A Pen by Wesley DEGLISE.

index.html

<section>
  
  <h2>Perspective blocks</h2>
  <p>Put you content into 3D boxes, see the perspective animated while scrolling</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section><section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section><section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

<section>
  
  <h2>Title</h2>
  <p>Content</p>
  
</section>

Perspective-blocks.markdown

Perspective blocks

Animated perspective while scrolling the page. Each section appear as a 3d block. Full CSS, no javascript.

A Pen by Wesley DEGLISE on CodePen.

License.

style.css

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin:0;
  height: 100%;
  overflow-y: scroll;

	background-color: #EEEEEE;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  -webkit-perspective : 550px;
  -moz-perspective    : 550px;
  perspective         : 550px; 

 }


section {
  padding: 0px;
  background:#fff;
  margin:0px;
  margin-right:auto;
  margin-left:auto;
  position: relative;
  display: block;
  width:70%;
  border: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;  
  transform-style: preserve-3d;  
  margin-bottom:60px;
}

section h2, section p{
  padding:20px;
}

section:after,section:before {
  content: "";
  background:#aaa;
  position: absolute;
  width: 100%;
  height: 70px;
}

section:after {
  top: auto;
  bottom: 0;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

section:before {
  top: 0;
  bottom: auto;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}