jquery - css3 3d立方体奇怪的旋转行为

Question

我有一个 css3 3d 立方体，我试图通过单击按钮来旋转它。现在它确实在旋转，但我希望以不同的方式旋转。我试图让立方体位置保持静止，但旋转到正确的一侧。现在它总是从它的容器 div 中旋转出来，我不确定如何修复它。

您可以在此处看到它无法正常工作的演示:http://jsfiddle.net/bU33f/

HTML:

<h1>Cube 2 - show sides</h1>

<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>

<section id="options">

  <p id="show-buttons">
    <button class="show-front">Show 1</button>
    <button class="show-back">Show 2</button>
    <button class="show-right">Show 3</button>
    <button class="show-left">Show 4</button>
    <button class="show-top">Show 5</button>
    <button class="show-bottom">Show 6</button>
  </p>

  <p>
    <button id="toggle-backface-visibility">Toggle Backface Visibility</button>
  </p>

</section>

CSS

.容器{ 宽度:200px； 高度:200px； position:relative； 边距:0 自动 40px； 边框:1px 实心#CCC； -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-透视:1000px； 视角: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-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
}

#cube figure {
  display: block;
  position: absolute;
  width: 196px;
  height: 196px;
  border: 2px solid black;
  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%, 0.7 ); }
#cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
#cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
#cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
#cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
#cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

#cube .front  {
  -webkit-transform: translateZ( 100px );
     -moz-transform: translateZ( 100px );
       -o-transform: translateZ( 100px );
          transform: translateZ( 100px );
}
#cube .back   {
  -webkit-transform: rotateX( -180deg ) translateZ( 100px );
     -moz-transform: rotateX( -180deg ) translateZ( 100px );
       -o-transform: rotateX( -180deg ) translateZ( 100px );
          transform: rotateX( -180deg ) translateZ( 100px );
}
#cube .right {
  -webkit-transform: rotateY(   90deg ) translateZ( 100px );
     -moz-transform: rotateY(   90deg ) translateZ( 100px );
       -o-transform: rotateY(   90deg ) translateZ( 100px );
          transform: rotateY(   90deg ) translateZ( 100px );
}
#cube .left {
  -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
     -moz-transform: rotateY(  -90deg ) translateZ( 100px );
       -o-transform: rotateY(  -90deg ) translateZ( 100px );
          transform: rotateY(  -90deg ) translateZ( 100px );
}
#cube .top {
  -webkit-transform: rotateX(   90deg ) translateZ( 100px );
     -moz-transform: rotateX(   90deg ) translateZ( 100px );
       -o-transform: rotateX(   90deg ) translateZ( 100px );
          transform: rotateX(   90deg ) translateZ( 100px );
}
#cube .bottom {
  -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
     -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 );
}

JS

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

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

Answer 1

您的问题来自默认应用于图形的边距。

刚刚设置

#cube figure {
     margin: 0px;
     display: block;
     ...

解决你的问题

fiddle