Ребенок Divs недоступен, когда родительский Div повернут перпендикулярно экрану

Я работаю с CSS3 Javascript для создания 3D-куба, который будет анимирован для перехода между сторонами. Каждая сторона куба - это div, внутри которого я могу разместить контент. В настоящее время я управляю преобразованиями с помощью клавиш ввода, чтобы протестировать различные сценарии.Ребенок Divs недоступен, когда родительский Div повернут перпендикулярно экрану

Общая настройка: родительский div помещается в заданную (X, Y) координату без компонента Z. Шесть divs, которые создают куб, помещаются в центр родительского div и преобразуются в правильные трехмерные местоположения. Затем родительский div преобразуется для поворота/перевода/масштабирования куба в 3D.

Проблема, с которой я столкнулась, заключается в следующем: каждый раз, когда плоскость родительского div параллельна оси z, дочерние divs больше не взаимодействуют.

Когда родительский div повернут на + -90 градусов вокруг оси X или Y (по существу поворачивая родительский div в боковом направлении), содержимое на кубе уже недоступно - вы не можете взаимодействовать с кубом. Ради моего приложения на одной стороне куба есть карта Google. Родительский div можно повернуть в любую другую позицию, и карта взаимодействует. Смотрите пример кода:

var adc = adc || {}; 
 
adc.body = null; 
 
adc.keyState = {}; 
 
adc.obj = null; 
 
adc.divs = []; 
 
adc.box = [2,7]; 
 
adc.init = { \t 
 
\t containers: function() { 
 
\t \t adc.divs[0] = adc.div.extend({dx: 0.0000, dy: 0.0000, dz: 0.0000, ax: -22.00, ay: -22.00, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); \t \t 
 
\t \t adc.divs[1] = adc.div.extend({dx: 0.0000, dy: 0.0000, dz: 0.0000, ax: 0.0000, ay: 0.0000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "none", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[2] = adc.div.extend({dx: 0.0000, dy: 0.0000, dz: 251.00, ax: 0.0000, ay: 0.0000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[3] = adc.div.extend({dx: 103.00, dy: 0.0000, dz: 153.00, ax: 0.0000, ay: 90.000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[4] = adc.div.extend({dx: -101.0, dy: 0.0000, dz: 150.00, ax: 0.0000, ay: 90.000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[5] = adc.div.extend({dx: 0.0000, dy: -101.0, dz: 150.00, ax: 90.000, ay: 0.0000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[6] = adc.div.extend({dx: 0.0000, dy: 101.00, dz: 150.00, ax: 90.000, ay: 0.0000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[7] = adc.div.extend({dx: 0.0000, dy: 0.0000, dz: 49.000, ax: 0.0000, ay: 0.0000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "preserve-3d", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 
\t \t adc.divs[8] = adc.div.extend({dx: 0.0000, dy: 0.0000, dz: 0.0000, ax: 0.0000, ay: 0.0000, az: 0.0000, sx: 1.0000, sy: 1.0000, sz: 1.0000, p: 000, tStyle: "none", tOrigin: "50% 50%", pOrigin: "50% 50%"}); 
 

 
\t \t adc.divs[0].init(['div viewport', 'absolute', 150, 150, 300, 300, 1, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'none']); \t \t 
 
\t \t adc.divs[1].init(['div keyMap', \t 'absolute', 0,  0, 200, 400, 2, 'none', '', '', '0px 0px 0px 0px', '', '', '0px', '', 'none']); 
 
\t \t adc.divs[2].init(['div front', \t 'absolute', 50, 50, 200, 200, 4, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'yellow']); 
 
\t \t adc.divs[3].init(['div right', \t 'absolute', 50, 50, 200, 200, 3, 'none', '', '', '0px 0px 0px 0px', '', '', '0px', '', 'none']); 
 
\t \t adc.divs[4].init(['div left', \t 'absolute', 50, 50, 200, 200, 4, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'red']); 
 
\t \t adc.divs[5].init(['div top', \t 'absolute', 50, 50, 200, 200, 4, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'green']); 
 
\t \t adc.divs[6].init(['div bottom', 'absolute', 50, 50, 200, 200, 4, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'purple']); 
 
\t \t adc.divs[7].init(['div back', \t 'absolute', 50, 50, 200, 200, 4, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'blue']); 
 
\t \t adc.divs[8].init(['div gmap', \t 'absolute', 0,  0, 200, 200, 5, 'solid', '', '', '5px 5px 5px 5px', '', '', '0px', '', 'blue']); 
 
\t \t 
 
\t \t adc.body = document.getElementById('body'); 
 
\t \t for(i=0; i<=adc.box[1]; i++) { 
 
\t \t \t if(i < adc.box[0]) {adc.body.appendChild(adc.divs[i].div);} 
 
\t \t \t else {adc.divs[0].div.appendChild(adc.divs[i].div);} 
 
\t \t } 
 
\t \t 
 
\t \t this.getMap(adc.divs[8].div, adc.divs[3].div); 
 
\t \t adc.specOps.txt(adc.divs[1].div, ["Translate: Arrow Keys", "Rotate: W - up about x-axis  S - down about x-axis", "   A - left about y-axis  D - right about y-axis", "   Q - stnd left rotate  E - stnd right rotate", "Scale:  R - scale down x-axis  T - scale up x-axis", "   F - scale down y-axis  G - scale up y-axis", "   C - scale down z-axis  V - scale up z-axis", "SPACEBAR: Console Output Transform Matrix & Perspective"]); 
 
\t \t 
 
\t \t adc.obj = adc.divs[0]; 
 
\t }, 
 
\t getMap: function(obj, wrap) { 
 
\t \t var map_options = { 
 
\t \t \t center: new google.maps.LatLng(44.5403, -78.5463), 
 
\t \t \t zoom: 8, 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t } 
 
\t \t var map = new google.maps.Map(obj, map_options); 
 
\t \t wrap.appendChild(obj); 
 
\t } 
 
} 
 

 
adc.transform = { 
 
\t new: function() { 
 
\t \t this.getDelt(); 
 
\t \t this.applyT(); 
 
\t }, 
 
\t getDelt: function() { 
 
\t \t if(adc.keyState[39]) {adc.obj.dx++;} 
 
\t \t if(adc.keyState[37]) {adc.obj.dx--;} 
 
\t \t if(adc.keyState[40]) {adc.obj.dy++;} 
 
\t \t if(adc.keyState[38]) {adc.obj.dy--;} 
 
\t \t if(adc.keyState[88]) {adc.obj.dz++;} 
 
\t \t if(adc.keyState[90]) {adc.obj.dz--;} 
 
\t \t if(adc.keyState[87]) {adc.obj.ax++;} 
 
\t \t if(adc.keyState[83]) {adc.obj.ax--;} 
 
\t \t if(adc.keyState[68]) {adc.obj.ay++;} 
 
\t \t if(adc.keyState[65]) {adc.obj.ay--;} 
 
\t \t if(adc.keyState[69]) {adc.obj.az++;} 
 
\t \t if(adc.keyState[81]) {adc.obj.az--;} 
 
\t \t if(adc.keyState[84]) {adc.obj.sx+=0.01;} 
 
\t \t if(adc.keyState[82]) {adc.obj.sx-=0.01;} 
 
\t \t if(adc.keyState[71]) {adc.obj.sy+=0.01;} 
 
\t \t if(adc.keyState[70]) {adc.obj.sy-=0.01;} 
 
\t \t if(adc.keyState[86]) {adc.obj.sz+=0.01;} 
 
\t \t if(adc.keyState[67]) {adc.obj.sz-=0.01;} 
 
\t \t if(adc.keyState[89]) {adc.obj.p++;} 
 
\t \t if(adc.keyState[72]) {adc.obj.p--;} 
 
\t }, 
 
\t applyT: function() { \t \t 
 
\t \t adc.obj.setTransform(); 
 
\t \t if(adc.keyState[32]) {console.log(adc.obj.div.style.transform, adc.obj.div.style.perspective);} 
 
\t } 
 
} 
 

 
window.addEventListener('keydown',function(e){ 
 
    \t adc.keyState[e.keyCode || e.which] = true; 
 
\t adc.transform.new(); 
 
},true); 
 

 
window.addEventListener('keyup',function(e){ 
 
\t adc.keyState[e.keyCode || e.which] = false; 
 
},true); 
 

 
adc.div = { 
 
\t div: null, 
 
\t init: function (a) { 
 
\t \t this.div = document.createElement('div'); 
 
\t \t this.div.id = \t \t \t \t a[0]; 
 
\t \t this.div.style.position = \t \t a[1]; 
 
\t \t this.div.style.top = \t \t \t a[2] + 'px'; 
 
\t \t this.div.style.left = \t \t \t a[3] + 'px'; 
 
\t \t this.div.style.height = \t \t a[4] + 'px'; 
 
\t \t this.div.style.width = \t \t \t a[5] + 'px'; 
 
\t \t this.div.style.zIndex = \t \t a[6]; 
 
\t \t this.div.style.borderStyle = \t \t a[7]; 
 
\t \t this.div.style.borderWidth = \t \t a[8]; 
 
\t \t this.div.style.borderColor = \t \t a[9]; 
 
\t \t this.div.style.borderRadius = \t \t a[10]; 
 
\t \t this.div.style.textAlign = \t \t a[11]; 
 
\t \t this.div.style.verticalAlign = \t \t a[12]; 
 
\t \t this.div.style.padding = \t \t a[13]; 
 
\t \t this.div.style.whiteSpace = \t \t a[14]; 
 
\t \t this.div.style.backgroundColor = \t a[15]; 
 
\t \t this.div.style.backgroundImage = \t a[16]; 
 
\t \t this.setTransform(); 
 
\t }, 
 
\t dx: 0.0, 
 
\t dy: 0.0, 
 
\t dz: 0.0, 
 
\t ax: 0.0, 
 
\t ay: 0.0, 
 
\t az: 0.0, 
 
\t sx: 1.0, 
 
\t sy: 1.0, 
 
\t sz: 1.0, 
 
\t p: 0, 
 
\t tStyle: "", 
 
\t tOrigin: "", 
 
\t pOrigin: "", 
 
\t setTransform: function() { 
 
\t \t this.div.style.transformStyle = this.tStyle; 
 
\t \t this.div.style.perspectiveOrigin = this.pOrigin; 
 
\t \t this.div.style.perspective = this.p + "px"; 
 
\t \t this.div.style.transformOrigin = this.tOrigin; 
 
\t \t this.div.style.transform = adc.specOps.mtx([this.dx, this.dy, this.dz, this.ax, this.ay, this.az, this.sx, this.sy, this.sz]); 
 
\t }, 
 
\t extend: function(props) { 
 
\t \t var prop, obj; 
 
\t \t obj = Object.create(this); 
 
\t \t for(prop in props) { 
 
\t \t \t if(props.hasOwnProperty(prop)) { 
 
\t \t \t \t obj[prop] = props[prop]; 
 
\t \t \t } 
 
\t \t } 
 
\t \t return obj; 
 
\t } 
 
} 
 

 
adc.specOps = { 
 
\t mtx: function(a) { 
 
\t \t return "translateX(" + a[0] + "px) translateY(" + a[1] + "px) translateZ(" + a[2] + "px) rotateX(" + a[3] + "deg) rotateY(" + a[4] + "deg) rotateZ(" + a[5] + "deg) scaleX(" + a[6] + ") scaleY(" + a[7] + ") scaleZ(" + a[8] + ")"; 
 
\t }, 
 
\t txt: function(a, b) { 
 
\t \t var pr = document.createElement("pre") 
 
\t \t for(i=0; i<b.length; i++) { 
 
\t \t \t pr.innerHTML += b[i]; 
 
\t \t \t pr.innerHTML += "<br>"; 
 
\t \t } 
 
\t \t a.appendChild(pr); 
 
\t } 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t </head> 
 
\t <body id="body"> 
 
\t \t <script src="https://maps.googleapis.com/maps/api/js"> 
 
\t \t </script> 
 
\t \t <script src="main.js"> 
 
\t \t </script> 
 
\t \t <script> 
 
\t \t \t document.addEventListener('DOMContentLoaded', function() { 
 
\t \t \t \t adc.init.containers(); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

Я проверил видимость компонента родительского DIV и остается «видимым» во все времена. Я знаю, что я могу настроить систему на то, что я хочу, - незаметно изменить ориентацию родительского div и поменять местами куба на завершение анимации. Но я хотел бы знать, есть ли способ использовать концепцию как есть.

Или есть ли лучший способ анимации трехмерных фигур, состоящих из divs?

Заранее благодарю вас за любое время и внимание.

источник

2014-11-06 daDib

В каком браузере вы работаете? Ваша карта на вашем кубе в фрагменте кода выше IS взаимодействует. –

Карта только не взаимодействует, когда родительский div параллелен оси z. Я проверил фрагмент, проблема, описанная выше, должна произойти. Лучше всего просматривать на полной странице. – daDib

Попробуйте использовать «a», пока родительский div (сплошная граница за кубом) не исчезнет. Используйте «d» для коррекции чередования. – daDib

У меня была аналогичная проблема, когда-то для трехмерной карты местности. Для любого поворота на 90 градусов, когда родительский div (viewport в вашем случае) перпендикулярен экрану, ширина (или высота) этого элемента становится нулевой и, следовательно, (по какой-либо причине) «скрыта» от взаимодействия.

Мое решение (даже если он на самом деле не обращаясь к делу), чтобы добавить обертки DIV (<div id="viewport-wrapper"><div id="viewport">...</div></div>) и следующий CSS:

#viewport-wrapper { 
    transform: rotateY(0.01deg); 
    transform-style: preserve-3d; 
}

Это минимальное вращение (даже не видимый на большинстве экранов или если только едва) гарантирует, что фактический #viewport никогда не будет перпендикулярным и, следовательно, останется интерактивным.

источник

2014-11-06 00:39:25 Paul

Относительно удалённого комментария: Ну, я не знаю, для числа _any_, но я попытался с одной, двумя и тремя обертками и всегда имел некоторые проблемы. В какой-то момент у меня даже была функция javascript, которая бы вращала сразу две обертки, чтобы избежать углов 90 градусов, но вращалась бы на 45 градусов. – Paul

Я понял, что прокомментировал, не изучая самостоятельно, отсюда и удаление. Кажется, что да, не имеет значения, что такое настройка - если какой-либо div становится ровно перпендикулярно экрану, его дети недоступны. – daDib

Я думал об использовании нескольких оберток, как вы сказали, двигаясь каждый 45 градусов самостоятельно. Это осложнилось для многонаправленных движений? Я согласен с вами в том, что небольшой угол смещения одной обертки незаметен, он может работать для моего приложения. – daDib

Ребенок Divs недоступен, когда родительский Div повернут перпендикулярно экрану

ответ

Смежные вопросы