时间戳

首页 > 解决方案 > CSS3 矩阵3d 变换

javascript - CSS3 矩阵3d 变换

问题描述

我正在尝试制作一个关于地毯的模型。我正在使用 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)+")",                          

    });

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

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

这是jsfiddle

标签： javascriptcssmatrixmockups

解决方案

推荐阅读