3

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

看例子，当你点击元素时，它从front到旋转back，问题是它没有围绕它的中心旋转，就像它失去平衡一样，将鼠标放在front侧面的左边框，单击元素, 并看看back现在一方的位置是如何关闭的。它们应该位于完全相同的位置。

我注意到当我删除填充/边距/边框时，它会很好地旋转，但我需要在那里有填充和边框。有没有办法用填充和边框来做到这一点 - 这样它就会围绕中心旋转，而不是偏向一边？

4

2 回答 2

1

内部 div (#card div) 太宽 (235 + 50 + 2) 和/或 #card 太窄 (245)。您必须将填充和边框添加到总宽度，或者使用box-sizing: border-box（带有供应商前缀）。

于 2012-02-24T12:26:45.590 回答
1

您可以通过在“翻转” 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/

于 2016-08-20T22:07:00.190 回答