1. 首頁
  2. 問答
  3. 父Div旋轉垂直於屏幕時無法訪問子Divider

父Div旋轉垂直於屏幕時無法訪問子Divider

2014-11-06 91 views
0

我正在使用CSS3 Javascript來生成一個3D立方體，該3D立方體將在兩側之間進行動畫過渡。立方體的每一面都是一個div，我可以在其中放入內容。目前，我使用輸入鍵控制變換以測試各種場景。父Div旋轉垂直於屏幕時無法訪問子Divider

整體設置是這樣的：父div放置在沒有Z分量的給定（X，Y）座標上。創建立方體的六個div都放置在父div的中心，並轉換爲正確的三維位置。然後將父div轉換爲以3D旋轉/平移/縮放立方體。

我遇到的問題是這樣的：任何時候，父div的平面與z軸平行，子div不再可以互動。

當父div圍繞X或Y軸旋轉+ -90度時（本質上是將父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的方向並交換立方體面。但是，我想知道是否有辦法按原樣使用這個概念。

或者，有沒有更好的方式來動畫由div組成的3D形狀？

預先感謝您的任何時間和考慮。

來源

2014-11-06 daDib

+0

你運行什麼瀏覽器？您上面的代碼片段中的多維數據集的地圖可以互動。 – 2014-11-06 00:10:19

+0

當父div與z軸平行時，該映射僅僅是不可交互的。我沒有測試過這個代碼片段，應該會發生上面詳述的問題。最好在Full Page中查看。 – daDib 2014-11-06 00:12:10

+0

嘗試使用「a」直到父div（立方體後面的實心邊框）消失。使用「d」來糾正過度旋轉。 – daDib 2014-11-06 00:16:28

回答

1

我曾經有一個類似的問題，一個3d地形地圖。對於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

+0

關於刪除的評論：嗯，我不知道_any_號碼，但我嘗試了一，二和三包裝，並總是有一些問題。在某些時候，我甚至有一個javascript函數會一次旋轉兩個包裝，以避免90度角，但會旋轉45度。 – Paul 2014-11-06 01:05:31

+0

我意識到我自己評論而沒有探索，因此刪除。看起來雖然是的，但是設置是什麼並不重要 - 如果任何div變得完全垂直於屏幕，那麼兒童是無法訪問的。 – daDib 2014-11-06 01:14:46

+0

我曾想過使用像你說的多個包裝，每個45度自己移動。對於多向運動來說，這會變得複雜嗎？我同意你的看法，單個包裝的小偏移角度是不可察覺的，它可能適用於我的應用程序。 – daDib 2014-11-06 01:16:17

相關問題

 相關問題