Как сохранить параллельность боковых граней с окном при 3D повороте?
Доброго времени суток, есть задача повернуть правый блок до состояния левого:
Перепробовал всё, что знал, вплоть до Пифагора и теоремы косинусов
Не получается сделать поворот АДАПТИВНЫМ
Я могу подогнать значения под конкретное разрешение экрана (если поворачивать через rotate3D), но вывести единую формулу не получается
Подскажите пожалуйста, как такое можно реализовать?
v3shin, хорошо, видимо тут задают вопросы люди, не открывающие впринципе гугл, Окей
Напомню свой вопрос:
У меня нет проблемы с тем, чтобы найти материал по 3D функциям
У меня проблема с тем, как сделать преобразование адаптивным и параллельным сбоку другим блокам, как на картинке в вопросе
Я могу подогнать значения, но не могу вывести общую формулу
Вопрос как сделать это адаптивным
Andrei1penguin1, в чем заключается адаптивность? Что за "параллельность сбоку другим блокам"? Есть пример с подогнанными значениями? Пока выглядит что вам нужно правильно просчитать perspective-origin и perspective.
Такая трансформация (rotate3d(0.55, 0, 1, -108deg)) даст нужный результат при ширине экрана 1024, посмотрите пожалуйста, как это выглядит
Боковые стороны span параллельны окну, при этом основания span параллельны родительскому div, такого эффекта я и добиваюсь
Я даже создал своеобразную таблицу значений X при разных углах наклона:
-97deg = 0.35, то есть rotate3d(0.35, 0, 1, -97deg)
-100deg = 0.4, то есть rotate3d(0.4, 0, 1, -100deg)
-103deg = 0.46, то есть rotate3d(0.46, 0, 1, -103deg)
-108deg = 0.55, то есть rotate3d(0.55, 0, 1, -108deg)
-113deg = 0.62, то есть rotate3d(0.62, 0, 1, -113deg)
-129deg = 0.8, то есть rotate3d(0.8, 0, 1, -129deg)
-132deg = 0.83, то есть rotate3d(0.83, 0, 1, -132deg)
-137deg = 0.88, то есть rotate3d(0.88, 0, 1, -137deg)
Но проблема в том, что будь у экрана хоть немного другое разрешение, уже видны неровности
Можно конечно добавить вручную еще диапазоны для большей точности, но это очень геморрно, создавать огромную таблицу значений
Вы удивитесь, но я даже в нейронку эти значения загонял для выявления общей формулы
Из-за маленького количества данных не помогло
Andrei1penguin1, о, так задача не в том, чтобы сдвинуть блок, а к тому, чтобы рассчитать угол сдвига относительно... чего? Какие данные можно вытащить? Я так понял, родительский блок трогать нельзя ни в каком случае.
v3shin, да, все верно, родительский блок не трогаем
Угол сдвига нам нужен такой же, который имитирует родительский блок
Делается это просто: берется арксинус от верхнего правого угла между самим окном и блоком div, благо синус вычисляется легко, так как треугольник прямоугольный, ну и получается угол примерно в 10° +- от разрешения экрана
Это угол поворота по оси Z, а вот рассчитать при этом угол по оси X, да так, чтобы ещё ничего не испортить—дело не из лёгких
Пока я конечно накидал таблицу соотношения разрешений популярных экранов и значений поворота по X, вроде работает терпимо, учитывая, что на месте блока стоит текст и неточности в +-2° там не видны, если не всматриваться, но решение вопроса все равно хотелось бы найти
v3shin, ещё я понял, что угол наклона по X зависит не от конкретного разрешения, а от пропорции сторон, стало проще подгонять значения
Вместо огромной таблицы получилось всего несколько ифов со значениями 1.7, 1.6 (отношением ширины к высоте) и ещё несколькими, что существенно облегчило задачу
let rect = document.getElementById('parent').getBoundingClientRect();
let angle = Math.atan(rect.height/2 / rect.width);
document.getElementById('child').style.transform = `skewY(-${angle}rad)`;
Простой
