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

Question

Andrei1penguin1 @Andrei1penguin1

HTML
CSS

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

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

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

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

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
Спасибо большое!)

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

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

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

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

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

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

HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 7 часов назад
- 38 просмотров
0

ответов
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- вчера
- 114 просмотров
1

ответ
CSS

Простой
Как такое сверстать?
- 1 подписчик
- 26 окт.
- 235 просмотров
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 152 просмотра
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 222 просмотра
3

ответа
CSS

Простой
Как выровнять в гриде по горизонтали?
- 1 подписчик
- 13 окт.
- 164 просмотра
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 133 просмотра
1

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 105 просмотров
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 153 просмотра
1

ответ
CSS

Простой
Как пофиксить визуальный глитч с border-radius и transparent + blur?
- 2 подписчика
- 26 сент.
- 156 просмотров
2

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

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

PHP-разработчик

Prosox

До 1 200 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

вообще то что вы хотите это не логично так как всё что есть в вэб берётся из жизни и перспектива в том числе
Если надо без перспективы, используйте 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 повороте?

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

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

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