css3 3d карта трансформации карты, отступы/маржа/граница вызовут начало вращения, как обойти это?

Question

http://jsfiddle.net/nicktheandroid/yWKMD/

Посмотрите на пример, при нажатии на элемент, она вращается вокруг от front к back, проблема заключается в том, что она не вращается вокруг его центра, это как это несбалансированным, держите мышь на левую границу стороны front, щелкните элемент и посмотрите, как теперь находится позиция стороны back. Они должны располагаться в одном месте.

Я заметил, что когда я удалял прокладку/маржу/границу, он вращался бы отлично, но мне нужно иметь прокладку и границу там. Есть ли способ сделать это с дополнением и границей - чтобы он вращался вокруг центра, а не в сторону?

Answer 1

Внутренние divs (#card div) слишком широки (235 + 50 + 2) и/или #карты слишком узкие (245). Вы должны добавить отступы и границу к общей ширине или, альтернативно, использовать box-sizing: border-box (с префиксами поставщика).

Answer 2

Вы можете обойти это, используя отрицательный запас на «перевернутом» div.

#card .back { 
    background: #DDD; 
    margin-left: -40px; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
      transform: rotateY(180deg); 
     -webkit-transform-origin: center; 
      transform-origin: center; 
} 

http://jsfiddle.net/gmsitter/jm80wv7b/