3D元素搞砸了自己 - CSS - JQUERY

Question

大家好，我有一个工作正常的3D立方体，

关于它的唯一问题是，当我按下“ top ”按钮时，它就会搞砸了，这意味着只要我按下它，按钮的前面'，' back '，' left '，' right '不再正常工作。 （立方体的帖子和形式的变化）。

你会在这个Fiddle.js中看到我的意思。

这是我的代码：

$(document).ready(function () {
    $("button").click(function () {
        var currentSide = $(this).attr("class");

        $("#cube").removeClass().addClass(currentSide);
    });





var dimensions = function() {    
    $(".front, .back, .left, .right").css({
        width: $(window).width(),
        height: $(window).height()
    });
    $(".top, .bottom").css({
        width: $(window).width(),
        height: $(window).width()        
    });
    
    $(".container").css({
        width: $(window).width(),
        height: $(window).height()
    });
    
    var cubeHeight = $(window).height() * ".5";
    var cubeHeightNeg = ($(window).height() * "1.1") * -1;
    
    var cubeWidth = $(window).width() * ".5";
    var cubeWidthNeg = ($(window).width() * ".5") * -1;
    var bottomTranslate = $(window).height() - cubeWidth;

    /*$("#cube").css({    
      "-webkit-transform": "translateZ(" + (cubeWidth * -1) + "px)"
    });*/
    
    $("#cube .front").css({
      "-webkit-transform": "translateZ(" + cubeWidth + "px)"
    });    
    $("#cube .back").css({
      "-webkit-transform": "rotateX(-180deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .right").css({
      "-webkit-transform": "rotateY(90deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .left").css({
      "-webkit-transform": "rotateY(-90deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .top").css({
      "-webkit-transform": "rotateX(90deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .bottom").css({
      "-webkit-transform": "rotateX(-90deg) translateZ(" + bottomTranslate  + "px)"
    });
    
    $(".show-top").click(function() {
         $(".top, .bottom").animate({
            width: $(window).width(),
            height: $(window).height()        
         },{
             duration:5000,
             queue:false
         });
        $("#cube .top").css({
          "-webkit-transform": "rotateX(90deg) translateZ(" + cubeHeight + "px)"
        });
        $("#cube .bottom").css({
          "-webkit-transform": "rotateX(-90deg) translateZ(" + cubeHeight + "px)"
        });
        $(".front, .back, .left, .right").css({
            width: $(window).height(),
            height: $(window).height()
        });
    });
};
    dimensions();
    $(window).resize(function () {
        dimensions();
    });    

    
    
});

   body { 
        margin:0px;
        padding:0px;
    }
    #options {
        position:absolute;
        top:0px;
        z-index:500;
    }
    .container {
      position: relative;
      margin: 0px;
      padding:0px;
      -webkit-perspective: 1600px;
      -moz-perspective: 1000px;
      -o-perspective: 1000px;
      perspective: 1000px;
      -webkit-backface-visibility: visible;
  }
  #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-transition: -webkit-transform 5s;
      -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
      transition: transform 1s;
  }
  #cube figure {
      margin: 0px;
      display: block;
      position: absolute;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
  }
  #cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  #cube .front {
      background: hsla(0, 100%, 50%, .6);
  }
  #cube .back {
      background: hsla(60, 100%, 50%, .6);
  }
  #cube .right {
      background: hsla(120, 100%, 50%, .6);
  }
  #cube .left {
      background: hsla(180, 100%, 50%, .6);
  }
  #cube .top {
      background: hsla(240, 100%, 50%, .6);
  }
  #cube .bottom {
      background: hsla(300, 100%, 50%, .6);
  }
  #cube .front {
      -moz-transform: translateZ(100px);
      -o-transform: translateZ(100px);
      transform: translateZ(100px);
  }
  #cube .back {
      -moz-transform: rotateX(-180deg) translateZ(100px);
      -o-transform: rotateX(-180deg) translateZ(100px);
      transform: rotateX(-180deg) translateZ(100px);
  }
  #cube .right {
      -moz-transform: rotateY(90deg) translateZ(100px);
      -o-transform: rotateY(90deg) translateZ(100px);
      transform: rotateY(90deg) translateZ(100px);
  }
  #cube .left {
      -moz-transform: rotateY(-90deg) translateZ(100px);
      -o-transform: rotateY(-90deg) translateZ(100px);
      transform: rotateY(-90deg) translateZ(100px);
  }
  #cube .top {
      -moz-transform: rotateX(90deg) translateZ(100px);
      -o-transform: rotateX(90deg) translateZ(100px);
      transform: rotateX(90deg) translateZ(100px);
  }


  #cube.show-front {
      -webkit-transform: translateZ(-100px);
      -moz-transform: translateZ(-100px);
      -o-transform: translateZ(-100px);
      transform: translateZ(-100px);
  }
  #cube.show-back {
      -webkit-transform: translateZ(-100px) rotateX(-180deg);
      -moz-transform: translateZ(-100px) rotateX(-180deg);
      -o-transform: translateZ(-100px) rotateX(-180deg);
      transform: translateZ(-100px) rotateX(-180deg);
  }
  #cube.show-right {
      -webkit-transform: translateZ(-100px) rotateY(-90deg);
      -moz-transform: translateZ(-100px) rotateY(-90deg);
      -o-transform: translateZ(-100px) rotateY(-90deg);
      transform: translateZ(-100px) rotateY(-90deg);
  }
  #cube.show-left {
      -webkit-transform: translateZ(-100px) rotateY(90deg);
      -moz-transform: translateZ(-100px) rotateY(90deg);
      -o-transform: translateZ(-100px) rotateY(90deg);
      transform: translateZ(-100px) rotateY(90deg);
  }
  #cube.show-top {
      -webkit-transform: translateZ(-100px) rotateX(-90deg);
      -moz-transform: translateZ(-100px) rotateX(-90deg);
      -o-transform: translateZ(-100px) rotateX(-90deg);
      transform: translateZ(-100px) rotateX(-90deg);
  }
  #cube.show-bottom {
      -webkit-transform: translateZ(-100px) rotateX(90deg);
      -moz-transform: translateZ(-100px) rotateX(90deg);
      -o-transform: translateZ(-100px) rotateX(90deg);
      transform: translateZ(-100px) rotateX(90deg);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="options">
    <p id="show-buttons">
        <button class="show-front">FRONT</button>
        <button class="show-back">BACK</button>
        <button class="show-right">RIGHT</button>
        <button class="show-left">LEFT</button>
        <button class="show-top">TOP</button>
        <button class="show-bottom">BOTTOM</button>
    </p>
</section>    

<section class="container">
    <div id="cube" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

任何人都知道如何解决此问题？