Как преобразовать матрицу преобразования CSS обратно в свойства ее компонента

Я получил матрицу преобразования CSS элемента, используя метод getComputedStyle() следующим образом.

var style = window.getComputedStyle(elem1, null);
var trans = style.transform;

транс = матрица (1, 0, 0, 1, 1320, 290)

Есть ли способ обратного расчета матрицы преобразования, чтобы получить исходные правила CSS, т.е. значения для перевода, поворота, наклона свойств. Я предполагаю, что его можно рассчитать, обратив метод, используемый для формирования матрицы. P.S. - Значения свойств преобразования даны в процентах, я хочу обратно вычислить эти процентные значения из матрицы.

Преобразование CSS - transform: translate(200%, 500%);


javascript html css css-transforms
person Dan Philip    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
15
arrow_downward

Да, это возможно сделать!

Параметры матрицы идут в следующем порядке: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Подробнее об этом читайте здесь

Если вы хотите получить числа из этой строки (матрица (1,0,0,1,720,290), вы можете использовать это регулярное выражение:

style = window.getComputedStyle(elem1, null);
trans = style.transform;
numberPattern = /-?\d+\.?\d*/g;

values = trans.match( numberPattern );

Это вернет следующий массив:

["1", "0", "0", "1", "720", "290"]

Редактировать после комментариев

Значения, возвращаемые в window.getComputedStyle, являются вычисленными значениями (т. е. проценты, которые вы использовали, преобразуются в значения пикселей). Вы можете обратить этот расчет вспять, но вам нужно знать, какой процент используется, чтобы выяснить, сколько пикселей должно быть.

Введите преобразования CSS3

Одна интересная особенность преобразований CSS заключается в том, что при применении их с процентными значениями они основывают это значение на размерах элемента, на котором они реализуются, в отличие от таких свойств, как верх, право, низ, лево, поля и отступы. , которые используют только размеры родителя (или в случае абсолютного позиционирования, который использует его ближайший относительный родитель). Источник

если вы используете следующий расчет, вы сможете получить проценты, которые вы использовали:

style = window.getComputedStyle(elem1, null);
trans = style.transform;
numberPattern = /-?\d+\.?\d+|\d+/g;

values = trans.match( numberPattern );

computedTranslateX = values[4];
computedTranslatey = values[5];

xPercentage = (computedTranslateX / elem1.offsetWidth) * 100;
yPercentage = (computedTranslateY / elem1.offsetHeight) * 100;
person Douwe de Haan    schedule 28.03.2017
comment
Мне не нужны значения в матрице. Мне нужны значения, которые я дал в CSS, как свойства перевода, поворота и наклона. - person Dan Philip; 28.03.2017
comment
Не могли бы вы опубликовать свой CSS, чтобы я мог видеть, какие значения вы ожидаете вернуть? - person Douwe de Haan; 28.03.2017
comment
Для перехвата отрицательных значений рассмотрите возможность использования шаблона: /-?\d+/g; - person Deliaz; 11.07.2019
comment
Это прекрасно работает, однако я столкнулся с крайним случаем; Safari часто возвращает значения с показателями степени, например -2.544326192711535e-16. Регулярное выражение numberPattern разделит это на два совпадения, например [2.544326192711535, 16]. - person Benjamin; 06.01.2020
comment
@ Бенджамин Ты совершенно прав. Я посмотрел, что я могу сделать, чтобы заставить его работать, но, похоже, мне нужно еще несколько тестов, прежде чем я смогу обновить свой ответ. Если вы хотите получить некоторый код, который вы могли бы использовать, проверьте эту публикацию для получения некоторых справочных указаний. - person Douwe de Haan; 06.01.2020
comment
@DouwedeHaan Спасибо. Для быстрого исправления я использую style.transform.split(/matrix\(|,|\)/).filter(v => v !== '') - person Benjamin; 06.01.2020