title: Transform an element on y-axis and align it left and right to outer element with
body: <p>When I rotate a div element -6 degrees like that ...</p>
  
  <pre><code>.skew-slider {
      max-width: 100%;
      overflow: hidden;
      float: left;
      perspective: 500px;
      margin: 0 auto 60px;
      display: block;
  }
  .skew-slider .inner-wrapper {
      width: 100%;
      float: left;
      display: block;
      -webkit-transform: rotateY( -6deg );
      -moz-transform: rotateY( -6deg );
      -o-transform: rotateY( -6deg );
      transform: rotateY( -6deg );
  }
  </code></pre>
  
  <p>... the element rotates correct and the perspective is also correct. So long so good. But the left and right border of the rotated element should be aligned exactly to the outer border without whitespace between or overflow on the right side.</p>
  
  <p>Here is the example: <a href="http://websamurai.ch/stackoverflow/skew-slider.html" rel="nofollow noreferrer">http://websamurai.ch/stackoverflow/skew-slider.html</a><a href="http://websamurai.ch/stackoverflow/skew-slider.html" rel="nofollow noreferrer"></a></p>
  
  <p>Has anyone a solution for that?</p>