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 现在不是在 Blink 上吗？还在使用 -webkit 吗？)。

试图解决:应用 -webkit-backface-visibility: 对 front 和 back 的 child 隐藏 (.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);
}

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