CSS3 matrix3d ​​transform - PullRequest
       37

CSS3 matrix3d ​​transform

0 голосов
/ 01 апреля 2019

Я пытаюсь сделать макет о коврах. Я использую 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...