css3 3d transformation card flip, padding/margin/border will cause the rotation origin to mess up, how to get around this?

Question

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

Look at the example, when you click the element, it rotates around from the front to the back, the problem is that it's not rotating around it's center, it's like it's off balance, hold your mouse at the left border of the front side, click the element, and see how the back side's position is now off. They should be positioned in exactly the same spot.

I noticed that when I removed the padding/margin/border, it would rotate fine, but I need to have the padding and border on there. Is there a way to do this with padding and a border - so that it will rotate around the center, not off to the side?

Answer 1

The inner divs (#card div) are too wide (235 + 50 + 2) and/or #card too narrow (245). You must add padding and border to total width, or alternatively use box-sizing: border-box (with vendor prefixes).

Answer 2

You can get around this by using a negative margin on the "flipped" 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/