如何用CSS3准确展开一个带有8面的盒子？

Question

自从一周后我尝试用html5 css3和一些javascript打开一个盒子。 最终结果应该在第一步（按钮1）＆＃34;打开框＆＃34; （像一个包）第二个应该是＆＃34;展开效果＆＃34;。 它在这个例子中几乎接近： http://jsfiddle.net/Rases/wprt40nr/

<div id="cube">
    <figure class="front">Cover</figure>
    <figure class="top">TOP!</figure>
    <figure class="back">Back</figure>
    <figure class="right">R1</figure>
    <figure class="right2">R2</figure>
    <figure class="left">Left1</figure>
    <figure class="left2">Left2</figure>
    <figure class="bottom">Bottom</figure>
</div>

但是我知道有些部分并没有真正联系起来。这就是为什么它与step3重叠的原因

所以我将各个部分相互连接，并将div替换为div标签，如下所示：http://jsfiddle.net/Rases/71gy2qu9/

<div id="cube">
    <div class="top">TOP! <div class="front">Cover</div></div>
    <div class="back">back </div>
    <div class="right">Right1 <div class="right2">Right2</div></div>
    <div class="left">left1 <div class="left2">Left2</div></div>
    <div class="bottom">bottom </div>
</div>

但是这个并没有很好地工作，我搜索了div和figure之间的不同，并找出坐标系统不同的东西 我的下一个想法是用span-tag替换div-tags，因为我在第6节中看到它：http://rupl.github.io/unfold/

<div class="sandbox">
  <div class="cube rotate labels">
   <span class="top side"></span>
   <span class="left side"></span>
   <span class="right side"></span>
   <span class="bottom side"><span class="back side flat"></span></span>
  </div>
</div>

在这里你可以看到第6节第二部分的折叠效果 所以我试试这个版本：http://jsfiddle.net/Rases/1b6a87t0/

 <div class="box" >
  <div id="cube">
    <span class="top">TOP!<span class="front">Front</span></span>
    <span class="back">BACK</span>
    <span class="right">Right1<span class="right2">Right2</span></span>
    <span class="left">Left1<span class="left2">L2</span></span>
    <span class="bottom">Bottom</span>
  </div>
 </div>

在该框的最后一个版本已连接但是从步骤1到步骤2的展开效果看起来很古怪。我无法找到错误，而css的其余坐标也不同（盒子和立方体是相同的）

这是我上一个例子中的CSS代码

/ ******* cube-Style ******* /

.box {
  width: 248px;
  height: 234px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #000;
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(0deg) translateZ(-116px);
     -moz-transform: rotateX(0deg) translateZ(-116px);
       -o-transform: rotateX(0deg) translateZ(-116px);
          transform: rotateX(0deg) translateZ(-116px);
  -webkit-transition: -webkit-transform 3s;
     -moz-transition: -moz-transform 3s;
       -o-transition: -o-transform 3s;
          transition: transform 3s;
}

#cube span {
  display: block;
  position: absolute;
  font-size: 15px;
  margin: 0px;
  font-weight: bold;
  color: white;
  text-align: center;
}

更新：今天我在第一个例子上尝试了http://matthewlein.com/ceaser/，但它不起作用，因为一端移动一圈，另一只手移动一行

第一个例子的问题仍然是，图层连接不是很好：

所以我必须使用其他示例，但在这种情况下，第一个打开效果会出错。 （打开盒子） 请记住：第一步打开盒子，第二步将盒子弄平。

我无法找到错误...感谢您的支持。

Answer 1

我从http://rupl.github.io/unfold/查看了你的第二个例子，并添加了更多的边+2个按钮来控制单个步骤：

http://jsfiddle.net/uu98t6en/

现在你所要做的就是通过定义＆＃34; step＆＃34; -Classes或者只是一个一个来将平面类调整到你想要开始和动画的位置。

$(".buttton1").click(function()
{
    $(".step1").addClass("flat");
}); 

$(".buttton2").click(function()
{
    $(".step2").addClass("flat");
});

$(".reset").click(function()
{
    $(".step1, .step2").removeClass("flat");
});

实施例： http://jsfiddle.net/uu98t6en/2/

我希望这很有帮助。

-moritz