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 に答える