Как сохранить параллельность боковых граней с окном при 3D повороте?

Question

Andrei1penguin1 @Andrei1penguin1

HTML
CSS

Как сохранить параллельность боковых граней с окном при 3D повороте?

Доброго времени суток, есть задача повернуть правый блок до состояния левого:

Перепробовал всё, что знал, вплоть до Пифагора и теоремы косинусов
Не получается сделать поворот АДАПТИВНЫМ
Я могу подогнать значения под конкретное разрешение экрана (если поворачивать через rotate3D), но вывести единую формулу не получается
Подскажите пожалуйста, как такое можно реализовать?

Вопрос задан более трёх лет назад
61 просмотр

12 комментариев

Подписаться 1 Средний 12 комментариев

Максим @LenovoId

вообще то что вы хотите это не логично так как всё что есть в вэб берётся из жизни и перспектива в том числе

Написано более трёх лет назад
v3shin @v3shin

Если надо без перспективы, используйте skew.

Написано более трёх лет назад
Andrei1penguin1 @Andrei1penguin1 Автор вопроса

v3shin, в том-то и прикол, что нужна перспектива
Нужен эффект отдаления блока

Написано более трёх лет назад
v3shin @v3shin

Andrei1penguin1, https://html5book.ru/3d-transform/

Написано более трёх лет назад
Andrei1penguin1 @Andrei1penguin1 Автор вопроса

v3shin, хорошо, видимо тут задают вопросы люди, не открывающие впринципе гугл, Окей
Напомню свой вопрос:
У меня нет проблемы с тем, чтобы найти материал по 3D функциям
У меня проблема с тем, как сделать преобразование адаптивным и параллельным сбоку другим блокам, как на картинке в вопросе
Я могу подогнать значения, но не могу вывести общую формулу
Вопрос как сделать это адаптивным

Написано более трёх лет назад
v3shin @v3shin

Andrei1penguin1, в чем заключается адаптивность? Что за "параллельность сбоку другим блокам"? Есть пример с подогнанными значениями? Пока выглядит что вам нужно правильно просчитать perspective-origin и perspective.

Написано более трёх лет назад
Andrei1penguin1 @Andrei1penguin1 Автор вопроса
v3shin, Да, в предыдущем своем вопросе я как раз приводил пример, смотрите:

<!DOCTYPE html> <html lang="en"> <body> <div style="height: 20vh; width: 40vw; clip-path: polygon(0 10vh, 40vw 0, 40vw 10vh, 0 20vh); background-color: green;"> <span style="position: absolute; top: 5vh; left: 20vw; display: block; font-size: 50px; writing-mode: tb-rl; overflow: hidden; background-color: red; transform: rotate3d(0.55, 0, 1, -108deg);">text</span> </div> </body> </html>

Такая трансформация (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)

Но проблема в том, что будь у экрана хоть немного другое разрешение, уже видны неровности
Можно конечно добавить вручную еще диапазоны для большей точности, но это очень геморрно, создавать огромную таблицу значений
Вы удивитесь, но я даже в нейронку эти значения загонял для выявления общей формулы
Из-за маленького количества данных не помогло

Тем более должен быть способ рациональнее
Написано более трёх лет назад
v3shin @v3shin

Andrei1penguin1, о, так задача не в том, чтобы сдвинуть блок, а к тому, чтобы рассчитать угол сдвига относительно... чего? Какие данные можно вытащить? Я так понял, родительский блок трогать нельзя ни в каком случае.

Написано более трёх лет назад
Andrei1penguin1 @Andrei1penguin1 Автор вопроса

v3shin, да, все верно, родительский блок не трогаем
Угол сдвига нам нужен такой же, который имитирует родительский блок
Делается это просто: берется арксинус от верхнего правого угла между самим окном и блоком div, благо синус вычисляется легко, так как треугольник прямоугольный, ну и получается угол примерно в 10° +- от разрешения экрана
Это угол поворота по оси Z, а вот рассчитать при этом угол по оси X, да так, чтобы ещё ничего не испортить—дело не из лёгких
Пока я конечно накидал таблицу соотношения разрешений популярных экранов и значений поворота по X, вроде работает терпимо, учитывая, что на месте блока стоит текст и неточности в +-2° там не видны, если не всматриваться, но решение вопроса все равно хотелось бы найти

Написано более трёх лет назад
Andrei1penguin1 @Andrei1penguin1 Автор вопроса

v3shin, ещё я понял, что угол наклона по X зависит не от конкретного разрешения, а от пропорции сторон, стало проще подгонять значения
Вместо огромной таблицы получилось всего несколько ифов со значениями 1.7, 1.6 (отношением ширины к высоте) и ещё несколькими, что существенно облегчило задачу

Написано более трёх лет назад

v3shin @v3shin

Andrei1penguin1, оно?

let rect = document.getElementById('parent').getBoundingClientRect();
let angle = Math.atan(rect.height/2 / rect.width);
document.getElementById('child').style.transform = `skewY(-${angle}rad)`;

Написано более трёх лет назад

Andrei1penguin1 @Andrei1penguin1 Автор вопроса

v3shin, удивительно, но в купе со всем остальным это работает, только не skewY, а skewX
Спасибо большое!)

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик + ИИ

9 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Сложный
Как добиться такого же фона ( как у свг)?
- 1 подписчик
- 15 июл.
- 214 просмотров
1

ответ
HTML

+2 ещё

Простой
Как запретить формирования ссылок вида /tel:?
- 2 подписчика
- 01 июл.
- 309 просмотров
3

ответа
HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 2 подписчика
- 30 июн.
- 187 просмотров
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 419 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 212 просмотров
1

ответ
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 257 просмотров
3

ответа
CSS

Простой
Как убрать «треугольник» от скролла?
- 1 подписчик
- 12 июн.
- 217 просмотров
1

ответ
CSS

Простой
Как сделать background изображение темнее и более размытым, как в дизайне?
- 1 подписчик
- 29 мая
- 175 просмотров
1

ответ
CSS

+1 ещё

Простой
Как создать вторую рамку за изображением, смещенную влево и вниз?
- 2 подписчика
- 26 мая
- 258 просмотров
4

ответа
CSS

Простой
Почему @media запрос не работает?
- нет подписчиков
- 22 мая
- 156 просмотров
1

ответ
Показать ещё Загружается…

вообще то что вы хотите это не логично так как всё что есть в вэб берётся из жизни и перспектива в том числе
Если надо без перспективы, используйте skew.
v3shin, в том-то и прикол, что нужна перспектива
Нужен эффект отдаления блока
v3shin, хорошо, видимо тут задают вопросы люди, не открывающие впринципе гугл, Окей
Напомню свой вопрос:
У меня нет проблемы с тем, чтобы найти материал по 3D функциям
У меня проблема с тем, как сделать преобразование адаптивным и параллельным сбоку другим блокам, как на картинке в вопросе
Я могу подогнать значения, но не могу вывести общую формулу
Вопрос как сделать это адаптивным
Andrei1penguin1, в чем заключается адаптивность? Что за "параллельность сбоку другим блокам"? Есть пример с подогнанными значениями? Пока выглядит что вам нужно правильно просчитать perspective-origin и perspective.
Andrei1penguin1, о, так задача не в том, чтобы сдвинуть блок, а к тому, чтобы рассчитать угол сдвига относительно... чего? Какие данные можно вытащить? Я так понял, родительский блок трогать нельзя ни в каком случае.
v3shin, да, все верно, родительский блок не трогаем
Угол сдвига нам нужен такой же, который имитирует родительский блок
Делается это просто: берется арксинус от верхнего правого угла между самим окном и блоком div, благо синус вычисляется легко, так как треугольник прямоугольный, ну и получается угол примерно в 10° +- от разрешения экрана
Это угол поворота по оси Z, а вот рассчитать при этом угол по оси X, да так, чтобы ещё ничего не испортить—дело не из лёгких
Пока я конечно накидал таблицу соотношения разрешений популярных экранов и значений поворота по X, вроде работает терпимо, учитывая, что на месте блока стоит текст и неточности в +-2° там не видны, если не всматриваться, но решение вопроса все равно хотелось бы найти
v3shin, ещё я понял, что угол наклона по X зависит не от конкретного разрешения, а от пропорции сторон, стало проще подгонять значения
Вместо огромной таблицы получилось всего несколько ифов со значениями 1.7, 1.6 (отношением ширины к высоте) и ещё несколькими, что существенно облегчило задачу
Andrei1penguin1, оно?

let rect = document.getElementById('parent').getBoundingClientRect(); let angle = Math.atan(rect.height/2 / rect.width); document.getElementById('child').style.transform = `skewY(-${angle}rad)`;
v3shin, удивительно, но в купе со всем остальным это работает, только не skewY, а skewX
Спасибо большое!)

Как сохранить параллельность боковых граней с окном при 3D повороте?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт