翻转动画 - CSS - 移动浏览器

Question

我创造了一个小提琴：

https://jsfiddle.net/6zkmg2cn/

I tried to add code but it wouldn't show the HTML from the fiddle?

这个小提琴在PC上运行良好，但移动浏览器上的小提琴不起作用。

正如您将看到的那样，它只是将“前方”翻转180度但从未显示“后退”

知道我做错了什么？

或者是否有人知道使用适用于移动设备的“鳍状肢”动画的更好方法？我只想要一个基本的“点击这个并且它翻转”动画。

编辑： 对不起，我应该添加更多信息： 事实证明它确实可以在Android Chrome和Firefox上运行，但我发现它不起作用的是iOS Chrome（56.0.2924.79）和iOS Safari（10.1.1 iOS）和iOS FireFox（6.1）

显然这是我在CSS中使用-webkit标志所缺少的东西？评论中显示与其兼容的链接表明应该使用这些浏览器，因此让我相信它的代码。对不起。

Answer 1

它是：

-webkit-backface-visibility：hidden;

我需要添加。

谢谢你们，你们的评论帮助我找到了答案。我很感激。