带有 CSS3 过渡效果的 HTML 翻页卡片

Question

我创建了一个 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 上运行不佳。

这里是jsfiddle to see it in action .

Answer 1

我找到了重写所有 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>

这里是JSFiddle of the new fixed code .