创建一个定位的CSS3跨浏览器插卡翻转而不闪烁(z索引/透视问题?)

Question

当前正在我的测试站点上尝试获得一个简单的跨浏览器3D CSS3卡翻转效果。

结果在Firefox中运行得很好，但在WebKit中，图像的一半会依次消失，还会闪烁很多。

我已经对照等网络上的工作示例检查了代码

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

由于我在那里找不到困难，我现在怀疑背景的z索引位置和打牌的视角值是相互对立的——尽管我现在还不知道它们是如何相互关联的。

这是我使用的CSS：

"#t02panel"是以"#t2front"one_answers"#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中测试）不喜欢每个转换参数有多个参数。

必须使用

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

而不是

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

以便创建期望的结果。