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

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-作为前缀，所以这不应该是问题（顺便说一句，现在不是Chromium 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 而不显示背面。

我发现，如果我更改旋转容器（而不是 .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 180 度和 .back 360 度

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

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

我还自动为所有传输属性添加前缀。

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