展开收缩的卡牌特效【原创】

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

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

页面的body部分，需设置好多张卡片的内容，代码如下：

<div class="inspired">
  <a href="http://www.sucaihuo.com" target="_blank">素材火 <strong>Richer</strong></a>
</div>
<div class="perspective">
  <div class='card-container'>
    <div class="message">点击 左侧 卡牌</div>
    <div class='card card-card1'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          A
        </span>
        <span class='card__suit'>
          <svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <path d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" stroke="#635F5C"></path>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          A
        </span>
        <span class='card__suit'>
          <svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <path d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" stroke="#635F5C"></path>
              </g>
          </svg>
        </span>
      </div>
    </div>
    <div class='card card-card2'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          K
        </span>
        <span class='card__suit'>
          <svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width="13.1923882" height="13.1923882"></rect>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          K
        </span>
        <span class='card__suit'>
          <svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width="13.1923882" height="13.1923882"></rect>
              </g>
          </svg>
        </span>
      </div>
    </div>
    <div class='card card-card3'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          Q
        </span>
        <span class='card__suit'>
          <svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          Q
        </span>
        <span class='card__suit'>
          <svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
              </g>
          </svg>
        </span>
      </div>
    </div>
    <div class='card card-card4'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          J
        </span>
        <span class='card__suit'>
          <svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" stroke="#A68385" transform="translate(10.000000, 7.631510) rotate(-180.000000) translate(-10.000000, -7.631510) "></path>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          J
        </span>
        <span class='card__suit'>
          <svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" stroke="#A68385" transform="translate(10.000000, 7.631510) rotate(-180.000000) translate(-10.000000, -7.631510) "></path>
              </g>
          </svg>
        </span>
      </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>