css - 创建一个定位的 CSS3 跨浏览器卡片翻转而不闪烁(z-index/透视问题？)

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);

这会将图像在 3D 空间中向后推 1 像素，从而在正面图像和背面图像之间产生足够的分离。如果你让它超过 1px，你可以看到元素是分开的，但 1px 就足够了，不会产生差异。

您可以将 -webkit-transform:translateZ(1px); 应用于前面的图像，但正如您将看到的，它会导致图像变大一点。