Мобильная версияЧтобы было более понятно, я быстро нарисовал то, что я есть:
В сцене с настраиваемая перспектива (контейнер), выраженная в vh, у меня есть элемент DIV (родительский DIV), который служит прямоугольником позиционирования для дочерних элементов div (дочерний DIV), этот родительский div наклонен по оси X на угол, который также настраивается.
Моя цель — отобразить дочерние элементы div прямо напротив экрана (верхний/нижний/правый/левый края параллельно верхнему/нижнему/правому/левому краю экрана) с квадратной формой. (ширина=высота), и, следовательно, вычислить отрицательный угол поворота по оси X, чтобы дочерний div был прямым, как я хочу, но после множества неудачных попыток и вычислений (я не очень силен в математике, довольно давно помню школу...) Я не получаю результата, работающего на всех типах настроек перспективы и угла наклона родительского прямоугольника...
Я думал, что просто нужно было сделать обратный угол родителя, т.е. родительский угол = 50 градусов, дочерний угол = -50 градусов, но, к сожалению, это не работает... и после некоторых тестов я обнаружил, что значение свойства перспективы тоже влияет на рендеринг дочернего элемента div...
Чтобы проиллюстрировать, что я хочу сделать, несколько экранов моего проекта:
Это довольно хорошая ширина: родительский элемент 57 градусов, дочерний -33 градуса, а также масштаб Y (1,6) для дочернего элемента, в противном случае это не квадрат, но если я изменю перспективу или угол, все станет плохо...
Это совсем не хорошо, сцена имеет меньше масштаб и мои дочерние элементы div не являются прямыми при использовании той же плохой формулы для расчета угла поворотаX...
Любая идея, которая поможет мне, будет очень приветствоваться!
(ps: извините за мой плохой английский... это не мой родной язык)
Изменить:
Сделал фрагмент, чтобы упростить и показать мою проблему :
Код: Выделить всё
#scene {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
width: 400px; height: 300px; perspective: 60vh; overflow: hidden; }
#recp {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393;
transform: rotateX(50deg); transform-origin: bottom; backface-visibility: hidden;
transform-style: preserve-3d; perspective: 60vh; }
#recp > div {
position: absolute; width: 20%; height: 80px; background: #999;
transform: rotateX(-25deg); transform-origin: bottom;
font-size: 48px; text-align: center; line-height: 80px; }
#recp > div#elt1 { left: 0; top: 0; }
#recp > div#elt2 { left: 40%; top: 40%; }
#recp > div#elt3 { left: 80%; top: 60%; }Код: Выделить всё
1
2
3
Редактировать 2:
После некоторого тестирования и чтения, я понимаю, что одного угла недостаточно для решения моей проблемы... Перспектива родительского div также важна для хорошего рендеринга дочернего элемента. На самом деле я ставлю то же значение, что и перспектива контейнера, но это Я думаю, что это неправильно, это должно быть значение, соответствующее прямоугольнику позиционирования (родительский div) сам по себе.
Таким образом, остается вопрос, какую формулу использовать для расчета правильного угла дочернего элемента div и правильной перспективы родительского элемента div...
< Strong>Edit3:
Путем проб и ошибок и без особого понимания математической логики того, что я делаю (ммммммхххх...) я понимаю, что если я буду сохранять ту же перспективу и применять угол равен половине угла родительского div в отрицательном значении, я почти в порядке, дайте или возьмите несколько пикселей... Я обновил фрагмент кода.
Может быть, мне нужно другое значение перспективы для родительского элемента div и быть идеальным по пикселям, или, может быть, мое предположение об угле, деленном на 2 неверно, я признаю, что совершенно запутался в этой математике...
Есть также высота элемента div, у меня есть процедура JS, которая проходит через мои дочерние элементы и назначает высоту в пикселях, равную ширине изображения, чтобы быть уверенным, что оно квадратное (ширина выражается в процентах для выравнивания по сетке), но при рендеринге изображение вообще не квадратное...
Edit4:
Обновлен фрагмент с сохранением-3d (спасибо @ Temani Afif)
Добавлено соотношение Ш/В 4/3 в контейнере, потому что сцена моего проекта имеет такое соотношение сторон.
Подробнее здесь: https://stackoverflow.com/questions/792 ... tated-solv
