javascript - CSS 3D 变换 - 打开一张卡片

Question

我正在制作电子贺卡。当用户单击卡片时，它将打开并显示其内容。我如何在 CSS 和 javascript 中制作这个？正如您在此处看到的，我正在使用透视和旋转。如果您知道一个看起来像我正在尝试做的示例，请发布链接。

Answer 1

这是我玩过的解决方案：

1. 创建一个执行旋转动画的样式。
2. 为动画的最终结果创建样式（基本上与您to在动画样式中的部分相同。
3. 创建一个按钮或触发器以将旋转样式添加到您的<div>
4. 在 JavaScript 中设置与动画相同的超时时间。
5. 一旦超时触发，删除动画样式并添加最终结果样式

这是您的 jsFiddle 的修改。让背面工作有一些怪癖。背面的位置必须使其右边缘与正面的左边缘对齐。然后，您必须将背面旋转 -180 度，使其从首页后面开始。此外，一旦动画到达中点，我必须切换 z-index。

所有这些在这里都很难解释，所以我专门写了一篇博文。我创建了一堆视觉效果来帮助使其清晰。

Answer 2

还有一个更简单的解决方案可以使用；无需使用计时器切换 z-index，您只需指定元素没有背面 ( -webkit-backface-visibility: hidden)，并将黄牌翻转 180 度，使其背面接触红色背面。

这样，您只需要翻转包含黄牌和红牌的容器，这可以通过添加一个类（例如class="card opened"）来完成。

这是您进行这些更改的示例代码：http: //jsfiddle.net/pYJm6/90/