如何將一個盒子放入另一個盒子中3d

Question

如何將小盒子放入另一個盒子中？我在Firefox中對此進行了編碼，但是如何在其他瀏覽器中實現相同效果？截圖在Firefox做：

在它只有正常工作Firefox中的時刻（？）。這裏是標記的一部分：

<div id="cube-inner"> 
     <div class="side-inner" id="side1"></div> 
     <div class="side-inner" id="side2"></div> 
     <div class="side-inner" id="side3"></div> 
     <div class="side-inner" id="side4"></div> 
     <div class="side-inner" id="side5"></div> 
     <div class="side-inner" id="side6"></div> 
    </div> 
    <div id="cube"> 
     <img class="side" id="side1" src="http://s4.goodfon.ru/wallpaper/previews-middle/525807.jpg" alt=""/> 
     <img class="side" id="side2" src="http://s2.goodfon.ru/wallpaper/previews-middle/524603.jpg" alt=""/> 
     <img class="side" id="side3" src="http://s2.goodfon.ru/wallpaper/previews-middle/515632.jpg" alt=""/> 
     <img class="side" id="side4" src="http://s5.goodfon.ru/wallpaper/previews-middle/500278.jpg" alt=""/> 
     <img class="side" id="side5" src="http://s5.goodfon.ru/wallpaper/previews-middle/503559.jpg" alt=""/> 
     <img class="side" id="side6" src="http://s5.goodfon.ru/wallpaper/previews-middle/514249.jpg" alt=""/> 
    </div> 

和jsFiddle與完整的來源。

Answer 1

您使用實驗和未來功能。如果你看一下文檔，你會發現，這些功能都沒有或只是部分受瀏覽器的支持，除了火狐似乎支持他們很好：

• box-sizing
• transform
• perspective
• transition

解決問題的最簡單方法就是不做任何事情，等到瀏覽器供應商rt支持這些技術。

另一種方式是使用某種其他技術，如JavaScript/JQuery或可能WebGL，這不幸也是一種實驗/未來技術。