Question

我正在尝试在css3中编写翻转过渡动画，但我在Chromium和Firefox中获得了不同的结果。 Firefox中的屏幕截图：

正常：http://prntscr.com/2dx4rv
悬停：http://prntscr.com/2dx58d

Chromium只是翻转图像。字面上：

正常：http://prntscr.com/2dx5o4
悬停：http://prntscr.com/2dx6k4

这是标记：

<a href="page2.html">
        <div class="flip-wrap">
            <div class="flipper">
                <div class="front">
                    <img src="IMG_0003.JPG" class="akImg" />
                </div>
                <div class="back">
                    <h5>Lorem Ipsum</h5>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>
                </div>
            </div>
        </div>
</a>

和css：

.flip-wrap {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px;
}

.akImg {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px;
}

.flipper {position: relative;}

.front {position: absolute;top: 0%; left: 0%; z-index: 100; width: 100%; height: 100%;}
.back {position: absolute;top: 0%; left: 0%;
    background-color: blue}

.back p {margin-top: -10px; margin-left: 5px; font-size: 0.8em}
.back h5 {margin-top: 10px; margin-left: 5px;}

.flip-wrap {
    perspective: 1000;
    -webkit-perspective: 1000;
}

.flip-wrap:hover .flipper, .flip-wrap.hover .flipper {
    transition-delay: 0.2s;
    transform: rotateY(180deg);
    -webkit-transition-delay: 0.2s;
    -webkit-transform: rotateY(180deg);
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
}       

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

有没有办法在Chromium中实现与在Firefox中相同的效果？我想我已经用-webkit-为所有内容做了前缀，所以这应该不是问题（顺便说一句，现在不是Blink on Blink？还在使用-webkit？）。

试图解决：应用-webkit-backface-visibility：隐藏给前后的孩子（.front *，back *），
将不透明度设置为0.99，
在标志中启用Override software rendering list 添加-webkit-transform：rotateY（0deg）

......僵尸没有用。还有其他建议吗？

编辑：可能相关，http://prntscr.com/2e4vhr。这是网站：http://www.queness.com/resources/html/css3dflip/。由于这是某种教程，我不认为它会在代码中出现重大错误。这可能是一个webkit错误吗？

Answer 1

我注意到它对我的Chromium来说效果很好，但在ie10 / 11它有镜面效果。我还检查了网上可用的几个翻转动画示例，并且所有这些示例都无法在ie10 / 11中正常工作，它们只是垂直翻转前面的div而不显示后面的div。

我发现，如果我改变旋转容器（而不是.flipper，我们单独旋转.face和.back）事情会更加跨浏览器。 http://fiddle.jshell.net/vPLZj/6/

所以，在这里我将“transition”和“transition-style”分配给.front和.back而不是.flipper

.front, .back {
backface-visibility: hidden;
transition:  all 2s;
    transform-style:preserve-3d;
}

并在悬停时旋转.front 180degrees和.back 360度

.flip-wrap:hover .front {
    transform:rotateY(180deg);
}

.flip-wrap:hover .back  {
    transform:rotateY(360deg);
}

我也自动为所有transi-properties添加前缀。

Answer 2

在Google上搜索了几个小时后，我终于找到了答案 - 根本没有使用背面可见性。

以下是代码：

.back {
    -webkit-transform: rotateY(180deg);
}
/*
Flipping the '.flipper' is simple, just rotate it 180 degrees.
*/
.flipper {
-webkit-transform-style: preserve-3d;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;
}

.flipper:hover {
    -webkit-transform: rotateY(180deg); 
}
/*
Flipping the faces is not so simple when the browser doesn't support the
'-webkit-backface-visibility' property correctly! We have to fake it so
that the opacity of the '.face' changes such that, when it's at 90 degrees
rotation, the opacity is 0.

The transition from opacity 1 to 0, or vice-versa, is quick but delayed
in both directions for the face that is being revealed. In other words, as
the front face nears 90 degrees on its way to the back, it suddenly changes
its opacity. As the back face, coming from back to front, passes 90 degrees
it suddenly increases it opacity.
*/
.front {
-webkit-transition-property: opacity;
-webkit-transition-timing-function: linear;
}
.flipper:hover .back, .flipper .front { opacity: 1; }
.flipper:hover .front, .flipper .back { opacity: 0; }
 /*timings*/
.flipper { -webkit-transition-duration: 0.6s; } /* 100% */
.front { -webkit-transition-duration: 0.06s; } /* 10% */
.flipper:hover .back, .flipper .front { -webkit-transition-delay: 0.3s; } /* 50% */
.flipper:hover .front, .flipper .back { -webkit-transition-delay: 0.24s; } /* 40% */

从https://gist.github.com/mattdenner/518776

获取代码（并调整一下以适应我的标记和时间需求）

css3过渡（旋转）在Chromium中无法正常工作

2 个答案: