Изменение размера / изменение масштаба: matrix3d ​​пропорционально - PullRequest
Новая
       19

Изменение размера / изменение масштаба: matrix3d ​​пропорционально

0 голосов
/ 02 мая 2020

У меня есть элементы, которые состоят из одинаковых % основанных CSS свойств, просто другое значение. Все они корректно масштабируются в соответствии с контейнером, за исключением тех элементов, которые состоят из transform: matrix3d. Просто немного испортилось, когда размер экрана изменился.

Пример элементов, которые изменили размер правильно 

position: absolute;
width: 13%;
height: 5%;
top: 29.5%;
left: 84%;

Пример элементов, которые не изменили размер правильно 

position: absolute;
width: 7.03%;
height: 12.50%;
top: 51.19%;
left: 31.62%;
background: rgba(0,0,0,0.5);
transform: matrix3d(1.25635, 0.0108821, 0, -0.0002864, 0.083478, 0.690983, 0, -0.0114086, 0, 0, 1, 0, 3.60115, -25.1273, 0, 1);

Я пытаюсь получить разницу до и после изменение размера экрана %. Так что я могу изменить масштаб оси x и оси y в преобразовании : matrix3d ​​, если это возможно, но я понятия не имею, как это сделать. Моя функция изменения размера, как показано ниже: 

var current_height = $('.box').outerHeight();
var current_width = $('.box').outerWidth();

$(window).on('resize', function() {
    var new_height = $('.box').outerHeight();
    var new_width = $('.box').outerWidth();
    var diff_height_pc = (new_height - current_height) / current_height * 100; // Height difference in percentage %
    var diff_width_pc = (new_width - current_width) / current_width * 100; // Width difference in percentage %

    console.log('before', 'h:' + current_height + 'px w:' + current_width + 'px');
    console.log('after', 'h:' + new_height + 'px w:' + new_width + 'px');
    console.log('diff', 'h:' + diff_height_pc + '% w:' + diff_width_pc + '%');

    $('.item').css('transform'); // Current value for transform: matrix3d(1.61476, 0.00453213, 0, -9.06426e-05, 0.131437, 0.942168, 0, -0.0122951, 0, 0, 1, 0, 6.34522, -33.6294, 0, 1)

    // How to perform resize on $('.item') ?
});
...