Вычислить translateZ для CSS Transform

Question

У меня возникла проблема при использовании свойства transform.

У меня есть 1 простой DIV, который заполняет экран, и другой DIV, который сидит поверх него.

я применяю следующее преобразование к DIV на вершине:

'преобразования': 'rotateX (Xdeg) rotateY (Ydeg)'; Я также использую preserve-3d

Это прекрасно работает во всех браузерах, кроме Safari. Из того, что я прочитал, Safari является единственным, который действительно получает это правильно, и закрепил верхний DIV, к которому применяется преобразование. Другие браузеры не обрезают DIV. В принципе, когда DIV повернут, он входит внутри/за нижним слоем DIV.

Итак, я предполагаю, что мне нужно использовать translateZ, чтобы вытащить верхний DIV вперед?

Мой вопрос в том, как я могу рассчитать, сколько мне нужно перевести div вперед по оси Z или заставить его работать в Safari? Вращение X и Y будут переменными, поэтому пользователи могут поворачивать элемент вдоль X, Y, или вообще, и вообще.

Любая помощь по этому вопросу будет изумительной. Благодаря!

Answer 1

Являются ли ваши значения X и Y всегда положительными?

В этом случае

transform-origin 0% 0% 

должен сделать трюк (делает центр вращения точка, которая будет ниже, в результате)

если нет, то вам нужно всего лишь немного логики:

, если ваш угол X положителен, х начало координат 0%, остальное х происхождение 100%

, если ваш угол Y является положительным, у происхождение 0%, в противном случае у происхождение 100%

, а затем применить

transform-origin x-origin y-origin 

Answer 2

Я не могу воспроизвести вашу проблему без jsFiddle. Вы можете использовать функцию типа element.getBoundingClientRect(). Это даст вам текущие координаты второго преобразованного div. Если вы сравните их с координатами первого div, вы должны найти необходимый перевод. Вам нужно сравнить все 4 угла преобразованного div. Отрицательный DELTA означает, что этот угол пересекает первый div.