Можно ли расчитать rotateY?

Question

[Ivanushka255]

Хочу сделать то, что на фото


Вопрос: Можно ли каким-то способом рассчитать угол rotateY ИЛИ все это делается "на глаз", подгоняя под пример?

Например, я могу сделать что-то вроде этого, НО, как вы понимаете, это далеко не то, что мне хотелось бы видеть в результате

P. S. Страдаю над этой темой уже долго, поэтому если кто знает ответ, пишите. Буду очень благодарен:))))

Comments

[Mikhri]

А что именно вы хотели бы рассчитать? Ширину блока в зависимости от угла поворота?

Answer 1

[RAX7]

Вся математика описана здесь: https://math.stackexchange.com/a/339033
Там же есть и proof-of-concept https://jsfiddle.net/dFrHS/1/
Можно воспользоваться этим фидлом чтобы посчитать матрицу трансформации. Для этого берем координаты углов полигона и его размеры и подставляем в переменную corners (ширину и высоту задаем через CSS).

spoiler

Затем через инструменты разработчика смотрим примененную transform: matrix3d
Можно пойти дальше и попробовать получить угол поворота из матрицы How to extract euler angles from transformation matrix, а можно не замарачиваться и использовать transform: matrix3d как есть.

Comments

[Ivanushka255]

Круто! Хочу еще задать вопрос по формуле расчета координат. Не сильно понятно что значат эти знаки:

Вот в этой формуле, например:


Какие это координаты? Заранее сорри за мой тупой вопрос

[Ivanushka255]

А вообще, если не сложно, можете прислать алгоритм расчета точек (как вы это все считали, в какую формулу подставляли)? Потому что, говорю честно - мой английский еще не так хорош, как хотелось бы, и информация с этой статьи воспринимается, мягко говоря, трудновато)

[RAX7]

Ivanushka255, это умножение матрицы на вектор https://zaochnik.com/spravochnik/matematika/matrit...
Сначала используются координаты углов трансформированного прямоугольника, затем - исходного прямоугольника.
Цифры я подставлял в код на jsfiddle
Алгоритм не очень понятный не из-за незнания английского, а из-за не знания линейной алгебры. Не расстраивайся, я тоже её не знаю =)

Answer 2

[Антон Шаманов]

вообще js в помощь, а так... разве для этого не подходит `calc()`?

Comments

[Ivanushka255]

Можете привести пример с помощью js?

[Антон Шаманов]

Ivanushka255, уточню еще раз: на основании каких данных нужно вычислить rotateY? по размерам фигуры?

[Ivanushka255]

Антон Шаманов, да, то есть по фото

[Антон Шаманов]

Ivanushka255, по фото все просто только в случаях вроде того что на картинке когда пару цветов и никаких посторонних объектов

[Ivanushka255]

Антон Шаманов, просто, если математику знаешь на достаточно неплохом уровне, а у меня ПОКА не совсем так) знание линейной алгебры мне в помощь:)

[Антон Шаманов]

Ivanushka255, там никакой сложной математики нет - обычные пропорции: находишь левый и правый бордюры проверяя цвет пикселей - их разность - текущая ширина фигуры, далее вычисляем 1% от макс. ширины, при углах 180/360deg ширина фигуры - 100%, при 90/180deg - 0%. ну и вычисляем сколько % от фигуры отображается и пересчитываем в deg.

Answer 3

[kocherman]

Элементарно. Жаль, статья не переведена на русский.