为什么我的 CSS Card Flip 不起作用？

Question

我正在尝试在我的网站上实现翻转卡片动画，但它不起作用。 转换似乎不起作用。

这是jsfiddle

HTML：

<section class="cardContainer">
    <div id="card">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
    </div>
</section>

JavaScript 和 CSS 处于困境。

Answer 1

您缺少许多浏览器对 CSS3 规则所需的样式前缀的使用。

一些常见的前缀

-webkit-
-moz-
-o-

这些前缀必须位于 CSS 文件中以下样式的前面。

transform
transition
perspective

例如，使用 CSS 的其中一个部分，您将进行以下更改

#card.flipped {
  transform: rotateY( 180deg );
}

/* to */

#card.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY( 180deg );
}

还要确保将前缀放在非前缀规则之前。