title: Perfecting perspective - css folding effect
body: <p><a href="http://codepen.io/stevendavisphoto/pen/xGdQBY">http://codepen.io/stevendavisphoto/pen/xGdQBY</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.image {
    width:600px;
    height:200px;
    overflow:hidden;
  }
  .pane1,
  .pane2,
  .pane3,
  .pane4 {
    height:100%;
    float:left;
    background-image:url('http://img06.deviantart.net/22c0/i/2013/256/a/e/san_francisco_skyline_by_stevendavisphoto-d6m7285.jpg');
    background-size:cover;
  }
  .pane1 {
    background-position:0 0;
    width:25%;
  }
  .folder1,
  .folder2 {
    height:100%;
    float:left;
    -webkit-backface-visibility:hidden;
    -webkit-transition:all 1s linear;
    -webkit-transform-origin:left center;
  }
  .folder1 {
    width:50%;
    -webkit-transform: perspective(300px) rotateY(90deg);
  }
  .image:hover .folder1 {
    -webkit-transform: perspective(300px) rotateY(0deg);
  }
  .black {
    position:absolute;
    top:0;
    left:0;
    right:50%;
    bottom:0;
    background:black;
    opacity:0.5;
    z-index:99;
    -webkit-backface-visibility:hidden;
    transition:opacity 1s linear;
  }
  .image:hover .black {
    opacity:0;
  }
  .pane2 {
    background-position:33.33% 0;
    width:50%;
  }
  .folder2 {
    width:50%;
    -webkit-transform: perspective(150px) rotateY(-90deg);
  }
  .image:hover .folder2 {
    -webkit-transform: perspective(150px) rotateY(0deg);
  }
  .folder2 .black {
    right:0;
  }
  .pane3 {
    background-position:66.67% 0;
    width:100%;
  }
  .pane4 {
    background-position:100% 0;
    width:25%;
    -webkit-transition:all 1s linear;
    -webkit-transform:translateX(-200%);
  }
  .image:hover .pane4 {
    -webkit-transform:translateX(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image"&gt;
    &lt;div class="pane1"&gt;&lt;/div&gt;
    &lt;div class="folder1"&gt;
      &lt;div class="black"&gt;&lt;/div&gt;
      &lt;div class="pane2"&gt;&lt;/div&gt;
      &lt;div class="folder2"&gt;
        &lt;div class="black"&gt;&lt;/div&gt;
        &lt;div class="pane3"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="pane4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make this folding effect perfect. The right side of the "<code>pane3</code>" inner fold is not lining up realistically with the left side of "<code>pane4</code>". Can anyone help me here? I am kinda new to perspective transforms. Thanks!</p>