CSS3 matrix3d变换

Question

我正在尝试制作有关地毯的模型。我正在使用JavaScript计算参数。这是我的JavaScript代码：

var mainImageHeight = $(".mockup-main-image").height();
    var mainImageWidth = $(".mockup-main-image").width();

$(".mockup-carpet").css({

        "width" : (210*mainImageHeight/513) + "px",   /*Carpet Width*/
        "height" : (400*mainImageWidth/910) + "px",   /*Carpet Height*/
        "left" : (412.61796875000005 * mainImageWidth / 910) + "px", 
        "top" : (265.07500000000005 * mainImageHeight / 513) + "px", 
        "transform" : "matrix3d(-0.06, "+(0.5 * mainImageHeight/513)+", 0.3, -0.0025, "+ (mainImageWidth/910*-2.55) +", 0, 1.1, 0, 1, 0, 2, 0, 0, 62, 0, "+(1.9*mainImageWidth/910)+")",                          

    });

如您所见，我正在尝试根据mainImageWidth和mainImageHeight计算它，因为它应该是响应式的。整数是比率。

一切都很好，除了垂直Y位置。我要从末尾更改第三个参数，现在是62。当mainImageHeight为513px时，此参数必须为62，但是当mainImageHeight为720px时，对于真实的模型位置，它必须为173。但我不知道该如何计算。我无法通过正比或反比来做到这一点。

这里是jsfiddle