css 3d cube имеет странное пространство при наведении на поворот

Question

У меня есть ряд 3d кубов, когда вы катитесь по ним, он вращается (я думаю, это технически не куб, так как есть только две стороны, но иллюзия - это куб). Когда куб не вращается, он сидит так, как это предполагается, но когда вы наводите курсор и происходит поворот, зеленый вращающийся контейнер смещен вправо, и я не уверен на 100% почему.

Благодарим за любую помощь заранее. Вот JS скрипку: http://jsfiddle.net/loriensleafs/c3ewZ/1/

HTML, выглядит следующим образом:

<div class='box-scene'> 
    <div class='box'> 
     <div class='front face'> 
     </div> 
     <div class="side face"> 
      <p>This is back</p> 
     </div> 
    </div> 
</div> 
<div class='box-scene'> 
    <div class='box'> 
     <div class='front face'> 
     </div> 
     <div class="side face"> 
      <p>This is back</p> 
     </div> 
    </div> 
</div> 
<div class='box-scene'> 
    <div class='box'> 
     <div class='front face'> 
     </div> 
     <div class="side face"> 
      <p>This is back</p> 
     </div> 
    </div> 
</div> 
<div class='box-scene'> 
    <div class='box'> 
     <div class='front face'> 
     </div> 
     <div class="side face"> 
      <p>This is back</p> 
     </div> 
    </div> 
</div> 

CSS: тело { поле: 0px; прокладка: 0px; }

.box-scene { 
    -webkit-perspective: 700; 
    width: 25%; 
    height: 180px; 
    float:left; 

    z-index: 999; 
} 
.box-scene:hover .box { 
    -webkit-transform: rotateY(90deg); 
} 
.box { 
    width: 100%; 
    height: 100%; 
    position: relative; 

    -webkit-transform-style: preserve-3d; 

    -webkit-transition: all 0.4s ease-out; 
    -webkit-transform-origin: 90px 90px -90px; 


} 

.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: visible; 

    -webkit-transform-origin: 0 0; 
} 
.front { 
    -webkit-transform: rotateY(0deg); 
    z-index: 2; 
    background: #d9d9d9; 
} 
.side { 
    background: #9dcc78; 
    -webkit-transform: rotateY(90deg); 
    z-index: 1; 
    left: 0px; 
} 

Answer 1

Вы должны изменить свойство г-оси в .box до -50% ширины .box-scene.

Единственный способ сделать это, похоже, с Javascript, потому что браузер не знает, что ссылка -50%. Как указывалось VikingBlooded, ось z должна быть длиной.

.box { 
    -webkit-transform-origin: center center -50%; 
} 

Так, так как это не возможно, и вы не объявляете фиксированную ширину в таблице стилей, вы должны использовать сценарий. Я не знаю, если вы хотите использовать JQuery, но этот небольшой скрипт решает вашу проблему:

$(function() { 
    var width = parseInt($(".box-scene").css("width")); 
    $(".box").css("-webkit-transform-origin", "center center -" + width/2 + "px"); 
});