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' 是它的两个面。

隐藏#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 回答