title: CSS3 Translate 3d Transform with JavaScript Drag
body: <pre class="lang-css prettyprint-override"><code>perspective:400px;
  transform-style: preserve-3d;
  transform:translateX(-$drawerWidth);
  transition: #{$transition};
  </code></pre>
  
  
  
  <pre><code>window.onload = addListeners();
  
  function addListeners(){
      document.getElementById('app').addEventListener('mousedown', mouseDown, false);
      window.addEventListener('mouseup', mouseUp, false);
  
  }
  
  function mouseUp()
  {
      window.removeEventListener('mousemove', divMove, true);
  }
  
  function mouseDown(e){
    window.addEventListener('mousemove', divMove, true);
  }
  
  function divMove(e){
    var div = document.getElementById('app');
    div.style.position = 'relative';
    div.style.left = e.clientX + 'px';
  }
  </code></pre>
  
  <p>I have a little bit of CSS and a little bit of JS as above. I am trying to drag and reveal a drawer. I want the dragging to not only track the app-canvas with the touches, but I also would like to see the navigation drawer dragging and opening out with the transform tracking 1:1 with the rest of the dragging of the app.</p>
  
  <p>Thoughts? I know this is sort of hard to read so... When you drag a div, another div begin to play it's animations 1:1 with the dragging +1 or -1 along the x-axis.</p>