3

CSS3で簡単な「フリップカード」を作成しました。ユーザーがカードにカーソルを合わせると、カードは下向きに反転して反対側が表示されます。backface-visibilityはに設定されてhiddenいるため、背面は表示されません。しかし、カードをめくってみると、裏側がまだ出ています。

だから私は見つけた実例を見て​​みました、そして興味深いことに私は彼とほとんど同じものを持っています、そして彼はうまくいきますが私のものではありません。（それはどうして可能ですか？！）ここでの答えに従うことも機能しません（私はすでにすべてbackface-visibilityをに設定しているためhidden）。

これが私のコードの一部です：

$(".wrapper").hover(function () {
    $(".flip").stop().transition({
        perspective: '100px',
        rotateX: '-180deg'
    }).toggleClass("down");
}, function () {
    $(".flip").stop().transition({
        perspective: '100px',
        rotateX: '0deg'
    }).toggleClass("down");
});

なぜこれが起こったのかについて何か考えはありますか？

4

1 に答える 1

3

少し追加するだけでうまくいきます。

.flip {
  ...
  -webkit-transform-style: preserve-3d;
}

サポートに応じて、非Webkitブラウザーのプレフィックスなしまたはプレフィックス付き。

于 2013-03-16T08:47:34.817 に答える