带有CSS3转换的HTML翻转卡

我已经创建了一个HTML翻转卡：

<div id="services_card" class="shadow iOS">
    <div class="front face">
        <i class="fa fa-apple fa-4x"></i> <p>iOS</p>
    </div>
    <div class="back face center">
        <i class="fa fa-apple fa-4x"></i> <p>iOS</p>
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
    </div>
</div>

但是，我有一个浏览器兼容性问题与变换旋转。 在chrome上运行良好，但在Safari或Firefox上运行不好

---

这里有一个。

我找到了一个重写所有CSS和HTML代码的解决方案，现在我再也看不到Safari和Firefox上的问题了。谁能给我一个反馈

<div class="card">
    <div class="front iOS face">
        <p>iOS</p>
    </div>
    <div class="back iOS face">
        <p>iOS</p>
        <p>Some text just for test </p>
    </div>
</div>

---

在我的Firefox中有一个。

可以正常工作。版本为40.0.3测试Firefox开发者版本：41.0a2 2015-07-20 it显示等级：正面和背面同时测试。对于Safari版本8.0.6 10600.6.3，正确显示并在1秒后消失背面div类。适用于Safari 8.0.8，但翻转完成后白色文本消失。是否有修复建议？是的。改用jQuery。这是一个很好的例子