title: Direction aware hover effect with jquery mouseOver has a direction error
body: <p>I found this great direction aware hover effect that I'd like to implement on my website. The issue I have found with it is, when hovering in from the top of the element the right 1/4 of the box will register as hovering in/out from the right side instead of the top of the element. </p>
  
  <p>Here is a <a href="http://codepen.io/anon/pen/EBhbA" rel="nofollow"><em>CodePen</em></a> to check out the working code.</p>
  
  <p>What I can't figure out is where the error is coming from. I have looked over padding, margin, perspective, width, &amp; height. I can't seem to find where the error is coming from.</p>
  
  <p>I believe the problem lies within the script code, which is below:</p>
  
  <pre><code>var nodes  = document.querySelectorAll('li'),
      _nodes = [].slice.call(nodes, 0);
  
  var getDirection = function (ev, obj) {
      var w = obj.offsetWidth,
          h = obj.offsetHeight,
          x = (ev.pageX - obj.offsetLeft - (w / 2) * (w &gt; h ? (h / w) : 1)),
          y = (ev.pageY - obj.offsetTop - (h / 2) * (h &gt; w ? (w / h) : 1)),
          d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
  
      return d;
  };
  
  var addClass = function ( ev, obj, state ) {
      var direction = getDirection( ev, obj ),
          class_suffix = "";
  
      obj.className = "";
  
      switch ( direction ) {
          case 0 : class_suffix = '-top';    break;
          case 1 : class_suffix = '-right';  break;
          case 2 : class_suffix = '-bottom'; break;
          case 3 : class_suffix = '-left';   break;
      }
  
      obj.classList.add( state + class_suffix );
  };
  
  // bind events
  _nodes.forEach(function (el) {
      el.addEventListener('mouseover', function (ev) {
          addClass( ev, this, 'in' );
      }, false);
  
      el.addEventListener('mouseout', function (ev) {
          addClass( ev, this, 'out' );
      }, false);
  });
  </code></pre>
  
  <p>Here is the transformation/animation CSS:</p>
  
  <pre><code>li .info { width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; border-radius: 4px; pointer-events: none; background-color: rgba(26, 188, 156, 0.9); transform: rotate3d(1, 0, 0, 90deg);}
  
  .in-top .info { transform-origin: 50% 0%; animation: in-top 300ms ease 0ms 1 forwards;}
  .in-right .info { transform-origin: 100% 50%; animation: in-right 300ms ease 0ms 1 forwards;}
  .in-bottom .info { transform-origin: 50% 100%; animation: in-bottom 300ms ease 0ms 1 forwards;}
  .in-left .info { transform-origin: 0% 0%; animation: in-left 300ms ease 0ms 1 forwards;}
  .out-top .info { transform-origin: 50% 0%; animation: out-top 300ms ease 0ms 1 forwards;}
  .out-right .info { transform-origin: 100% 50%; animation: out-right 300ms ease 0ms 1 forwards;}
  .out-bottom .info { transform-origin: 50% 100%; animation: out-bottom 300ms ease 0ms 1 forwards;}
  .out-left .info { transform-origin: 0% 0%; animation: out-left 300ms ease 0ms 1 forwards;}
  
  
  @keyframes in-top {
    from {
      transform: rotate3d(-1, 0, 0, 90deg);
    }
  
    to {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes in-right {
    from {
      transform: rotate3d(0, -1, 0, 90deg);
    }
  
    to {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes in-bottom {
    from {
      transform: rotate3d(1, 0, 0, 90deg);
    }
  
    to {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes in-left {
    from {
      transform: rotate3d(0, 1, 0, 90deg);
    }
  
    to {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  }
  @keyframes out-top {
    from {
     transform: rotate3d(0, 0, 0, 0deg);
    }
  
    to {
      transform: rotate3d(-1, 0, 0, 102deg);
    }
  }
  @keyframes out-right {
    from {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  
    to {
      transform: rotate3d(0, -1, 0, 102deg);
    }
  }
  @keyframes out-bottom {
    from {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  
    to {
      transform: rotate3d(1, 0, 0, 101deg);
    }
  }
  @keyframes out-left {
    from {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  
    to {
      transform: rotate3d(0, 1, 0, 102deg);
    }
  }
  </code></pre>
  
  <p>You can find the HTML on the CodePen I linked above.</p>
  
  <p>Again - what I'm having an issue with is, when hovering into the element from the top right side, it doesn't register as hovering in from the top. It registers as hovering in from the right side and transitions the overlay div accordingly.</p>