JQuery Кнопка, реагирующая на зону нажатия

Как сделать кнопку, которая будет отклоняться в сторону курсора при нажатии? Т.е., если нажать на верх кнопки, она отклонится вверх, на левую часть - влево, и т. д.

Для этого сначала я определяю зону, где произошёл клик (хоть код и ужасный, признаю, но зона всегда определяется правильно!), однако что происходит с анимацией - я ума не приложу: к примеру, по Y происходит отклонение только вверх, независимо от параметра 1 или -1.

function pitch(e) {
 var bound = $(this)[0].getBoundingClientRect(); 
 var x = e.screenX;
 var y = e.screenY;
 var deg = 30;
 var pitch_y = 0;
 var pitch_x = 0;
 if (x < bound.left + bound.width / 3) {
    pitch_y = 1;
 } else if (x > bound.right - bound.width / 3) {
    pitch_y = -1;
 }
 if (e.pageY < $(this).offset().top + bound.height / 3) {
    pitch_x = 1;
 } else if (e.pageY > $(this).offset().top + bound.height * 2 / 3) {
    pitch_x = -1;
 }
 $(this).transition({
    rotate3d: pitch_x + ', ' + pitch_y + ', 0, ' + deg + 'deg'
 });
}

Подобный эффект (каким я хочу его видеть) можно видеть при нажатии на плитки в меню "Пуск" Windows 10.

Для функции .transition использую библиотеку Transit <script src="res/script/jquery.transit.min.js"></script>