title: Transform a div with translateX 100% then push it back into view by x amount of pixels
body: <p>I am trying to make my own push navigation and I am using translateX to push the content to the right hand side to reveal the navigation.</p>
  
  <p>The problem I am having is that I don't want the content to be pushed 100% to the right and have a small portion of it showing on the right hand side.</p>
  
  <p>I can't specify the exact amount of pixels because it needs to be responsive. What I thought I could do was translateX it to 100% and then somehow pull it back by say 50px but I can't figure out how to do this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click','.wrapper span', function() {
    $('.wrapper').addClass('active');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height:100%;
  }
  .wrapper {
    background:red;
    height:100%;
  }
  .wrapper span {
    width:50px;
    height:50px;
    background:yellow;
  }
  .wrapper.active {
    transform:translateX(100%);
  }
  .navigation {
    position:absolute;
    background:#666666;
    color:#ffffff;
    top:0px;
    left:0px;
    bottom:0;
    z-index:-1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    i am a wrapper
    &lt;span&gt;click me&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="navigation"&gt;
    i am a nav
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="https://jsfiddle.net/susannalarsen/rbkqagog/" rel="nofollow">DEMO</a></strong></p>