使用方法：

1、head引入css文件

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

2、body引入部分

<ul class="diamonds">
    <li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="back">
          <span>美食餐飲</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="back">
          <span>足療按摩</span>
        </div>
      </a>
    </li><li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/3.jpg" alt="">
        </div>
        <div class="back">
          <span>運(yùn)動(dòng)休閑</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/4.jpg" alt="">
        </div>
        <div class="back">
          <span>電影票</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/5.jpg" alt="">
        </div>
        <div class="back">
          <span>在線購物</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="back">
          <span>美容美發(fā)</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="flipper">
        <div class="front">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="back">
          <span>在線教育</span>
        </div>
      </a>
    </li>
</ul>