Question

目前尝试在我的测试网站上使用简单的跨浏览器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'是两张脸。

隐藏＃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);     }

有关如何跨浏览器使其工作的任何输入都非常感谢!!!

Answer 1

我假设这是一个WebKit错误。这是一个解决方法。如果您将以下内容应用于卡片翻转时显示的图像，您将不会再看到闪烁：

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

这会将图像1px向后推入3D空间，从而在前后图像之间创建足够的分离。如果你使它超过1px，你可以看到元素是分开的，但是1px足以让它们产生影响。

您可以将-webkit-transform: translateZ(1px);应用于正面图像，但正如您将看到的那样，它会使图像变得更大。

Answer 2

嗯。在Z上向后移动“背面”图像确实有助于消除闪烁，但是在转弯期间没有解决原始问题的一半图像完全消失在外部元素的背景后面。

还了解到：WebKit（在Safari中测试）不喜欢每个transform-parameter多个参数。

不得不一起去

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

而不是

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

以创建所需的结果。

创建一个定位的CSS3跨浏览器卡翻转没有闪烁（z-index / perspective问题？）

2 个答案: