On mousemove translate div position within a specified range

I have a wrapper called #mousearea and I have a div called #mouseshift what I would like to do is when I hover over #mousearea I would like to shift the translate3d(0,230%,0) value between a particular range.

I have got the mousemove working but I currently end up with something like translate3d(7881%,230%,0) it's just too sensetive I would like it to translate the X co-ordinate between something like 0-60% so it's far more subtle.

Here is what I have so far:

jQuery(document).ready(function($){
    $('#mousearea').mousemove(function (e) {

        var shiftAmount = 1;

        $('#mouseshift').css(
            'transform', 'rotate(90deg) translate3d(' + -e.pageY + shiftAmount + '%,230%,0)'
        );
    });
});

Update:

This is a little closer, except it logs the correct translate3d but doesn't apply it to #mouseshift.

$('#mousearea').mousemove(function(e){
        var x = e.pageY - this.offsetTop;
        var transfromPosition = 'translate3d(' + x + ', 230%, 0)';
        console.log(transfromPosition);

        if ((x <= 800)) {
            //$('#mouseshift').css({'top': x});
            $('#mouseshift').css('transform', transfromPosition);
        }
    });

Final Solution:

jQuery(document).ready(function($){

    $('#mousearea').mousemove(function(e){

        var min = 50;
        var max = 70;

        var x = e.pageY;
        var windowHeight = window.innerHeight;

        scrolled = (x / windowHeight);
        percentageScrolled = scrolled * 100;

        offsetScroll = max - min;
        offsetPercentage = scrolled * 20;
        translateX = min + offsetPercentage;


        console.log(x + 'px');
        console.log(windowHeight + 'px window height');
        console.log(percentageScrolled + '% scrolled');
        console.log(offsetScroll + 'offset scroll');
        console.log(offsetPercentage + '% offset percentage');




        var transfromPosition = 'rotate(90deg) translate3d(' + translateX + '%, 230%, 0)';
        $('#mouseshift h1').css('transform', transfromPosition);
    });

});

Convert to a reusable plugin I would like to extend this to work with more than one object now and each object would have a different max and min value:

This is what I have but it seems to effect all the items on only use on elements max and min.

$(function () {
    $('#mouseshift-1, #mouseshift-2').mouseShift();
});    
(function ($) {
    $.fn.mouseShift = function () {
        return this.each(function () {
            var myEl = $(this);
            var min = $(this).data('min');
            var max = $(this).data('max');

            $('#mousearea').mousemove(function (e) {
                var yPosition = e.pageY;
                var windowHeight = window.innerHeight;

                scrolled = (yPosition / windowHeight);
                //percentageScrolled = scrolled * 100;
                offsetRange = max - min;
                offsetRangePercentage = scrolled * 20;
                offset = min + offsetRangePercentage;

                ////  Debug
                console.log('max: ' + max + ', Min:' + min);
                console.log(yPosition + 'px');
                console.log(windowHeight + 'px window height');
                //console.log(percentageScrolled + '% scrolled');
                console.log(offsetRange + 'px offset scroll');
                console.log(offsetRangePercentage + '% offset percentage');

                var transfromPosition = 'rotate(90deg) translate3d(' + offset + '%, 230%, 0)';
                myEl.css('transform', transfromPosition);
            });
        });
    };
})(jQuery);

And some HTML for clarity:

<div class="column"><h1 id="mouseshift-1" data-min="50" data-max="70">boo</h1></div>
      <div class="column"><h1 id="mouseshift-2" data-min="20" data-max="90">bah</h1></div>
      <div class="column"><h1 id="mouseshift-3" data-min="80" data-max="100">bing</h1></div>