title: Mouse over on button, another div or HTML tag will side out to the left of the button
body: <p>Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="block"&gt;
  &lt;div class="normal"&gt;
      &lt;span&gt;Follow me...&lt;/span&gt;
  &lt;/div&gt;
  &lt;a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile"&gt;
      on Twitter
  &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>   /**
   * CSS3 balancing hover effect
   * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
   */
  body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
  
  .block { 
      width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; 
      position: relative; 
      perspective: 350;
  }
  .block .normal {
      background: gray; padding: 15px; cursor: pointer;
      position:relative; z-index:2;
  }
  .block .hover {
      background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
      position: relative; z-index:1;
      transition: all 250ms ease;
  }
  .block:hover .normal {
      background: #0084b4;
  }
  .block:hover .hover {
      margin-right: 0; 
      transform-origin: top;
      /*
      animation-name: balance;
      animation-duration: 1.5s;
      animation-timing-function: ease-in-out;
      animation-delay: 110ms;
      animation-iteration-count: 1;
      animation-direction: alternate;
      */
      animation: balance 1.5s ease-in-out 110ms 1 alternate;
  }
  
  @keyframes balance { 
      0% { margin-top: 0; } 
      15% { margin-top: 0; transform: rotateX(-50deg); }  
      30% { margin-top: 0; transform: rotateX(50deg); } 
      45% { margin-top: 0; transform: rotateX(-30deg); } 
      60% { margin-top: 0; transform: rotateX(30deg); } 
      75% { margin-top: 0; transform: rotateX(-30deg); } 
      100% { margin-top: 0; transform: rotateX(0deg);} 
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/9dwk8vzg/" rel="nofollow noreferrer">https://jsfiddle.net/9dwk8vzg/</a></p>
  
  <p>Original link:<a href="http://dabblet.com/gist/5559193" rel="nofollow noreferrer">http://dabblet.com/gist/5559193</a></p>
  
  <p>But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/</p>