Перевернутая карта преобразования CSS css3, отступы / margin / border вызовут путаницу начала вращения, как обойти это?

Question

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

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

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

Answer 1

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

Answer 2

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

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