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

Question

Andrei1penguin1 @Andrei1penguin1

HTML
CSS

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

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

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

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

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

Написано более двух лет назад

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

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

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

Войти через центр авторизации

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

JavaScript

+2 ещё

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 30 минут назад
- 26 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- час назад
- 55 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- час назад
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 16 часов назад
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 16 часов назад
- 62 просмотра
2

ответа
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 18 часов назад
- 66 просмотров
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 20 часов назад
- 51 просмотр
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 20 часов назад
- 66 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 23 часа назад
- 57 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 23 часа назад
- 79 просмотров
0

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Нужен директолог с опытом работы

19 апр. 2024, в 10:02

6000 руб./за проект

Помощь с парсингом XML файла яндекс товаров

19 апр. 2024, в 09:46

500 руб./за проект

Обработать массив фотографий

19 апр. 2024, в 08:46

5000 руб./за проект

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

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

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

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