如何在進行3D轉換時修復元素大小更改？

我正在嘗試一些涉及3D旋轉的奇怪CSS效果，並轉換爲設置場景。這基本上是一個「菜單」。如何在進行3D轉換時修復元素大小更改？

HTML：每個<li>標籤包含一個文本標籤，我添加：在CSS之後插入圖像。

問題：li元素太大了，我無法看到其他圖像「背後」。插入的圖像爲100x160，標籤繪製在圖像本身上，但元素（根據檢查員）爲123.411 x 268.049。標籤是123.411x268.049（不知道爲什麼它在頂部和底部有巨大的利潤），圖像顯示爲123.411x197.458（由於我將它拉到前面的視角）。 197是好的。 268正在浪費70個像素......阻止訪問下一個圖像。

強制高度，即使通過javascript也無濟於事。它只會改變位置（反正位置是固定的）。我即將放棄，只是製作一個覆蓋整個事物的大型可點擊圖像地圖，但會在不使用JavaScript的情況下傷害我的懸停效果。

Says it wants code to have a jsfiddle link, how stupid

更新：嘗試https://jsfiddle.net/6ut694yf/1/（只有我在做什麼節），並檢查蠟燭的高度。爲什麼它比圖像本身大得多？懸停效果顯示了這些問題。您需要一個大屏幕才能使視口足夠寬，以便項目不會彼此重疊，因爲我還沒有爲較小的屏幕添加縮放比例（並且移動設備將具有完全不同的CSS，因此爲什麼所有這些都在CSS而不是HTML）。

來源

2015-09-16 Evan Langlois

某些代碼和小提琴或筆重新創建問題將會有所幫助 –

花了我一段時間才能在那裏獲得足夠的空間，以便您可以看到問題所在。我希望有人有一個更簡單的答案。但蠟燭阻擋了女神，因爲瀏覽器認爲蠟燭比實際高得多。 –

這不是一個好的答案，所以如果有人有更好的答案，請讓我知道。我最終做的是製作一堆div，我使用CSS calc（）功能將圖像定位在圖像上（十幾個），以嘗試使圖像的顯示與圖層保持一致...記住其3D視角和屏幕尺寸完全一致，所以實際的計算會很激烈。由於旋轉的平面會改變大小，因此即使窗口高度也會影響水平位置。所以你最終得到這樣的位置：

[data-item="incense"] { 
    top: calc(42vh - 65px); 
    left: calc(70vw - 25px - 12vh); 
    height: calc(35px + 12vh); 
    width: calc(170px + 6vh); 
    z-index: 5002; 
}

Z-index讓物品重疊，對空間更近的物體使用更高的Z-index。然後這些項目被添加類位置和顯示沒有內容。有點jQuery不會這樣：

// hot is a temporary hack to correct 3D distortion of targets 
    $(".hot").hover(function() { 
      tagname = "#" + $(this).attr('data-item'); 
      $(tagname).addClass('hovered'); 
      $(tagname).trigger('mouseenter'); 
     }, function() { 
      tagname = '#' + $(this).attr('data-item'); 
      $(tagname).removeClass('hovered'); 
      $(tagname).trigger("mouseleave"); 
     }); 
    $(".hot").click(function() { 
      tagname = "#" + $(this).attr('data-item'); 
      $(tagname).trigger("click"); 
    });

使用「熱」類（用於熱點的明確覆蓋）扎熱點到實際的項目ID的div的數據項屬性被激活。然後我添加一些額外的CSS並創建一個「.hovered」類來複制自然：懸停效果。

來源

2015-09-19 04:50:51

如何在進行3D轉換時修復元素大小更改？

回答

相關問題