css3 3d cube странное поведение вращения

Question

У меня есть 3d cube css3, который я пытаюсь повернуть на кнопку. Сейчас он вращается, но по-другому, я бы хотел. Я пытаюсь сделать это так, чтобы положение куба оставалось неподвижным, но поворачивалось в правильную сторону. Сейчас он все время поворачивается из контейнера 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; позиция: относительная; margin: 0 auto 40px; border: 1px solid #CCC; -webkit-perspective: 1000px; -moz-перспектива: 1000px; -о-перспектива: 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

Answer 2

Следующая кажется исправить проблему:

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

на каждом из классов переходов.

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

Добавление же для других браузеров следует установить вам на вашем пути :-).