title: Animate an skewed div without undesired effects
body: <p>I was thinking to make a menu with parallelogram containers and animate them on CSS. The idea is when you hover an item, the parrallelogram change it's height to make a visual scaling effect.</p>
  
  <p>So far, so good, but the problem is that when I change the parallelogram's height on hover, it also change it's position a little bit to the right and I don't know why.</p>
  
  <p>So the cuestion would be: Is it any way to change the parallelogram's height preserving it's position?</p>
  
  <p>Here's the undesired effect I've got:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      float: left; 
      padding: 0 0.5rem;
  }
  
  .parallelogram {
   position: relative;
   width: 125px;
   height: 50px;
   -webkit-transform: skew(-30deg);
   -moz-transform: skew(-30deg);
   -o-transform: skew(-30deg); 
   transform: skew(-30deg); 
      transition: all .4s linear;
  }
  
  .parallelogram:hover {
   height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="parallelogram" style="background-color: red;"&gt;
      1
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="parallelogram" style="background-color: green;"&gt;
      2
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="parallelogram" style="background-color: blue;"&gt;
      3
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>