2

現在、テスト サイトで動作する単純なクロス ブラウザー 3D CSS3 カード フリップ エフェクトを取得しようとしています。

結果は Firefox では問題なく動作しますが、WebKit では画像の半分が順番に消え、かなりちらつきます。

私はすでにウェブ上の実例に対してコードをチェックしました

http://developer.apple.com/library/safari/#samplecode/CardFlip/Introduction/Intro.html%23//apple_ref/doc/uid/DTS40007646-Intro-DontLinkElementID_2

そこに問題が見つからなかったので、背景の z-index 位置と互いに対戦しているカードの視点値を疑っていますが、それらがどのように相互に関連しているかは今のところわかりません.

私が使用するCSSは次のとおりです。

「#t02panel」は、「#t2front」と「#t2back」が 2 つの面であるカードとして機能します。

#t02back の背面も非表示にすることで (論理的には害を及ぼすことも、必要とされることもありません)、Firefox での外観のちらつきを防ぎましたが、WebKit ではうまくいきませんでした。

        #t02front   {   -webkit-backface-visibility: hidden;    } 
        #t02back    {   -webkit-transform: rotateY (-180deg);   -moz-transform: rotateY(-180deg);   -o-transform: rotateY(-180deg);     transform: rotateY(-180deg);    }        
        #t02front, #t02back {   position:absolute; z-index: 1; box-sizing: border-box; 
                                    -moz-backface-visibility: hidden;   -o-backface-visibility: hidden;     backface-visibility: hidden;    }

        #topic02        #t02panel       {   -webkit-perspective: 600;                               -moz-perspective: 600;                              -o-perspective: 600;                            perspective: 600;
                                            -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);     -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);    -o-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
                                            -webkit-transform-style: preserve-3d;                   -moz-transform-style: preserve-3d;                  -o-transform-style: preserve-3d;                transform-style: preserve-3d;
                                            -webkit-transition: -webkit-transform 1s;               -moz-transition: -moz-transform 1s;                 -o-transition: -o-transform 1s;                 transition: transform 1s;
                                            -webkit-transition: all 1.0s linear;                    -moz-transition: all 1.0s linear;                   -o-transition: all 1.0s linear;                 transition: all 1.0s linear;    }
        #topic02:hover  #t02panel       {   -webkit-transform: rotateY(180deg);                     -moz-transform: rotateY(180deg);                    -o-transform: rotateY(180deg);                  transform: rotateY(180deg);     }

これをクロスブラウザで機能させる方法についての意見は大歓迎です!!!

4

2 に答える 2

2

これはWebKitのバグだと思います。これが回避策です。カードが反転したときに表示される画像に次のように適用すると、ちらつきは表示されなくなります。

-webkit-transform: translateZ(-1px);

これにより、その画像が3D空間で1px後方に押し出され、前面と背面の画像が十分に分離されます。1pxを超えて作成すると、要素が分離されていることがわかりますが、1pxで違いはありません。

正面の画像に適用-webkit-transform: translateZ(1px);することもできますが、ご覧のとおり、画像が少し大きくなります。

于 2012-08-06T10:29:12.277 に答える
0

うーん。「裏側」の画像を Z 上で後方に移動すると、ちらつきを取り除くのに役立ちますが、ターン中に画像の半分が外側の要素の背景の後ろに完全に消えるという元の問題は解決しません。

また、学習: WebKit (Safari でテスト済み) は、変換パラメーターごとに複数の引数が好きではありません。

一緒に行かなければならなかった

    -webkit-transform:  rotateY (-180deg);
    -webkit-transform:  translateZ(-1px);

それよりも

    -webkit-transform:  rotateY (-180deg) translateZ(-1px);

望ましい結果を生み出すために。

于 2012-08-08T14:46:44.270 に答える