为什么赢得我的CSS卡翻转工作？

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 );
}

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