3D展开收缩的卡片-网格布局的图文列表

一款3D展开收缩的卡片-网格布局的图文列表，点击任意图文上面的向下箭头，都会3D展开详细的文字说明内容和一个按钮，同时高亮显示当前的图文消息（其余均被白色遮罩），展开之后向下的箭头会自动变形为“叉号”，点击“叉号”可以恢复到原始状态。

分类：图片代码 > 图片墙难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div容器的嵌套结构，代码如下：

<div class="cards">
  <div class="card">
    <img src="http://s4c.cymru/temp/wave1.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          Card title
          <small>Image from unsplash.com</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">Read more</a>
        </div>
      </div>
    </div>
  </div>

<!-- 省略部分演示代码 -->

  <div class="card">
    <img src="http://s4c.cymru/temp/wave2.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          Card title
          <small>Image from unsplash.com</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

页面的底部，需引入jQuery库和必要的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>