Поэтому я пытаюсь создать функцию прокрутки, которая использует matrix3d для преобразования элементов при прокрутке. Я сталкиваюсь с проблемой, пытающейся вычислить конечную позицию элемента после того, как преобразование произойдет.
Мне нужно знать, какую дополнительную высоту вызовет преобразование.
Сейчас я просто умножение 1 и 5 значений css matrix3d на высоту элемента, затем деление на 2 и добавление значения 13 матрицы. Примерно так:
let a = Math.abs((matrix[1] * rect.height) / 2);
let b = Math.abs(((matrix[5] - 1) * rect.height) / 2);
const c = matrix[13];
return a + b + c;
Это работает для всего, кроме вращения, и это также кажется мне очень забавным.
Вопрос, который мне задают, у меня есть значение конечной матрицы и начальный ограничивающий прямоугольник элемента - это способ расчета конечного ограничивающего прямоугольника элемента, вызванного добавлением матрицы к элементу.
Вот скрипка, которая наглядно демонстрирует, что я лучше прошу Fiddle
Итак, скажем, у меня есть следующая матрица с перекосом: 40 градусов, масштабируемая: 1,5, translateY: 300, translateX: 200 и rotateZ: 140 градусов.
[-0.766044, 0.321394, 0, 0, -0.642788, -1.688429, 0, 0, 0, 0, 1, 0, 200, 300, 0, 1]
и элемент с прямоугольником начальной позиции:
x: 100
y: 600
width: 100
height: 100
top: 600
right: 120
bottom: 700
left: 100
Как определить, где будет находиться элемент после добавления следующего преобразования matrix3d(-1, -0.8391, 0, 0, 0, -1.5, 0, 0, 0, 0, 1, 0, 200, 300, 0, 1)
Any помощь будет высоко ценится.