Question

我想基于此example制作CSS动画。它完全适合我，但有两件事是我做不到的。首先 - 我想用两个jpg文件（内左，右内）自定义贺卡的内侧。第二 - 我希望卡片在点击时打开，而不是点击并按住。我试图通过试验和错误自己做，但没有成功。如果我包含第三个文件（内部左侧）并生成backface-visibility: hidden，它仍然没有给我所需的结果。我还尝试编辑this示例，但仍然无法做到。对于css动画savvys来说，它应该很简单，我猜，所以请任何人帮助我。这是我正在使用的HTML，

<section class="container">
 <div id="card">
  <figure class="front"><img src="img_card/1.jpg"></figure>
  <figure class="inner-left"><img src="img_card/1-2.jpg"></figure>
  <figure class="inner-right"><img src="img_card/1-3.jpg"></figure>
 </div>
</section>

和css部分在jsfiddle链接。

Answer 1

通过使用隐藏的复选框，标签以及:checked和兄弟（+）选择器，可以在没有JavaScript的情况下执行此操作。

看一下这个fiddle，它也有内左和右内的图像。

Answer 2

之前我已经快速查看了类似的内容，我认为可能需要通过javascript事件来实现，该事件会在单击时添加一个类以将您的卡移动到打开状态。

https://davidwalsh.name/css-flip

以上链接是一个示例，显示单张卡片翻转，但它应该接近您正在寻找的概念

我希望有帮助

CSS动画（贺卡打开/关闭）

2 个答案: