Как разместить одну коробку внутри другой коробки в 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

Вы используете экспериментальные и будущие функции. Если вы посмотрите на документацию, вы поймете, что эти функции не или только частично поддерживается браузерами, кроме Firefox, которые, кажется, поддерживает их довольно хорошо:

• box-sizing
• transform
• perspective
• transition

Самый простой способ решить проблему - просто ничего не делать и ждать, пока поставщики браузеров rt для поддержки этих технологий.

Другим способом является использование какой-либо другой технологии, такой как JavaScript/JQuery или, возможно, WebGL, что, к сожалению, является экспериментальной и будущей технологией.