如何在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

解决问题的最简单方法就是什么都不做，等到浏览器供应商开始支持这些技术。

另一种方法是使用某种其他技术，如JavaScript / JQuery或WebGL，不幸的是它也是一种实验/未来技术。