css3过渡（旋转）在铬中不能正常工作

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

正常：
悬停：

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

正常：
悬停：

以下是标记：

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

有没有办法在Chromium中实现与Firefox相同的效果？我想我已经在所有东西前面加了-webkit-，所以这应该不是问题（顺便说一句，Chromium现在不是在闪烁吗？仍然在使用-webkit？）

试图解决以下问题： 应用-webkit背面可见性：隐藏到正面和背面的子项（.front*，back*），
将不透明度设置为0.99，
在标志中启用

覆盖软件呈现列表

添加-webkit变换：旋转（0度）

。。。但没有一个起作用。还有什么建议吗

---

编辑：可能相关。以下是网站：。由于这是某种教程，我不希望它在代码中出现重大错误。这可能是webkit的错误吗？

我注意到它对我的Chromium很有效，但在ie10/11中它有镜像效果。我还检查了网络上可用的几个翻转动画示例，它们在ie10/11中都不能正常工作。它们只是垂直翻转正面div，而不显示背面div

我发现，如果我更改旋转容器（而不是.flipper，我们分别旋转.face和.back），则会更容易跨浏览器。

所以，在这里，我将“过渡”和“过渡风格”指定给.front和.back，而不是.flipper

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

在悬停状态下，我向前旋转180度，向后旋转360度

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

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

---

我还自动为所有transi属性添加前缀

在谷歌上搜索了几个小时后，我终于找到了答案——根本不使用背面可见性

代码如下：

.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% */

---

代码取自：

可能重复@CarloCannas，我从那里尝试了一切，但没有成功（更新了问题）您是否尝试使用--忽略gpu黑名单选项启动chromium？@Carlo这就是“覆盖软件渲染列表”的目的，如果我没弄错的话，那旗子是持久的。另外，这只是解决办法，我正在为一个站点做这件事，需要更好的解决方案（上面的代码只是一个片段）。Linux上的Chromium在图形加速方面有一些问题。检查chrome://gpu 翻页查看是否一切正常。我通过运行

chromium browser——忽略gpu黑名单

，让你的代码在Ubuntu上正常工作。尝试了一下，仍然得到了相同的结果。受你解决方案的启发，我找到了“正确”的解决方案（至少对我而言），然后在GitHub上偶然发现了更好的解决方案（好吧，写得更好，结果是一样的）。关键在于不透明度，因为webkit在某些随机情况下无法识别背面可见性。

.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% */