CSS 3D Transform - 打开一张牌

Question

我正在制作贺卡.当用户点击卡片时,它将打开并显示其内容.我如何在CSS和JavaScript中做到这一点？我正在使用透视和旋转,你可以在这里看到.如果你知道一个看起来像我正在尝试做的例子,请发布链接.

Answer 1

这是我玩过的解决方案:

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

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

所有这些在这里很难解释,所以我专门写了一篇博文.我创建了一堆视觉效果来帮助说清楚.