Проблема с анимацией JQuery

картинка почему-то не хочет вращаться при наведении на нижнюю ее часть, соотвественно не опускается вниз, в остальные стороны - все прекрасно, прикладываю ссылку на codepen, спасибо большое за помощь заранее!

https://codepen.io/kgryzlov/pen/bGBjmXd

не могу выложить весь код, кидаю js, остальное на codepen

$(function(){
    var card = $(".col-4");

    card.on('mousemove', function (e) {
        var x = e.clientX + $(window).scrollLeft() - $(this).offset().left;
        var y = e.clientY + $(window).scrollTop()- $(this).offset().top;

        var rY = map(x, 0, $(this).width(), -17, 17);
        var rX = map(y, 0, $(this).height(), -17, 17);

        $(this).children("img").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });

    card.on('mouseenter', function () {
        $(this).children("img").css({
                transition: "all " + 0.05 + "s" + " linear",
                WebkitTransition: "all " + 0.05 + "s" + " linear"
        });
    });

    card.on('mouseleave', function () {
        $(this).children("img").css({
            transition: "all " + 0.2 + "s" + " linear",
            WebkitTransition: "all " + 0.2 + "s" + " linear"
        });

        $(this).children("img").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
    });

    function map(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});