Stacked papers (CSS3)

HTML

<div id='paper'>
    <div class='content'>
        <img src="http://lorempixel.com/people/400/240/" alt="Lorem ipsum" />
    </div>
</div>

SCSS

p {
  font: 12px Ubuntu, Arial, sans-serif;
  color: #878787;
  margin: 0 0 20px;
}

#paper {
  margin: 2em 4em;
  display: inline-block;
  position: relative;
  $border-color: #ddd;
  .content, &:before, &:after {
    border: 1px solid $border-color;
    background: white;
  }
  &:before, &:after {
    content: "";
    position: absolute;
    $from-border: 0;
    left: $from-border;
    top: $from-border;
    right: $from-border;
    bottom: $from-border;
    border-color: darken($border-color, 8%);
    box-shadow: 0 0 16px rgba(0, 0, 0, .16);
  }
  &:before {
    -webkit-transform: rotate(-1.4deg);
  }
  &:after {
    -webkit-transform: rotate(1.2deg);
  }
  .content {
    position: relative;
    z-index: 1;
    padding: 1em;
    box-shadow: 0 0 32px rgba(0, 0, 0, .16);
    > img {
      box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    }
  }
}