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

.container { 宽度：200px; 身高：200px; 位置：相对; 保证金：0自动40px; border：1px solid #CCC; -webkit-perspective：1000px; -moz-perspective：1000px; -o-perspective：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

以下似乎可以解决您的问题：

-webkit-transform-origin: 50% 100%;

在每个过渡类上。

http://jsfiddle.net/bU33f/1/

为其他浏览器添加相同内容应该会让您顺利:-)。

Answer 2

您的问题来自默认情况下应用于数字的边距。

只需设置

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

解决您的问题

fiddle

css3三维立方体奇怪的旋转行为

2 个答案: