纯CSS的多卡片鼠标悬停特效【原创】

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

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

页面的body部分，多个div容器里分别放入不同的卡片，代码如下：

<div class='cards'>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>1</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>2</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>3</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>4</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>5</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>6</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>7</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>8</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>9</div>
    </div>
  </div>
  <div class='card'>
    <div class='card-face'>
      <div class='card-label'>10</div>
    </div>
  </div>
</div>