<!DOCTYPE html>
<!-- https://www.youtube.com/watch?v=W3eJWpvIl0g -->
<!-- http://www.byki.com/lists/chinese%20traditional/001-common-verbs.html -->
<html>
<head>
  <style media="screen" type="text/css">
    html {
      font-family: sans-serif, FangSong, "仿宋", STKaiti, "华文楷体";
      font-size: xx-large;
      color: white;
      margin-top:0px;
      margin-bottom:0px;
      margin-right:0px;
      margin-left:8px;
    }
    .flip3D {
      width: 240px;
      height: 200px;
      margin: 10px;
      float: left;
    }
    .flip3D > .front {
      position: absolute;
      background: lightslategray;
      width: 240px;
      height: 200px;
      border-radius: 7px;
      transform: perspective(600px) rotateY(0deg);
      -webkit-transform: perspective(600px) rotateY(0deg);
      -moz-transform: perspective(600px) rotateY(0deg);
      -o-transform: perspective(600px) rotateY(0deg);
      transition: transform .5s linear 0s;
      -webkit-transition: transform .5s linear 0s;
      -moz-transition: transform .5s linear 0s;
      -o-transition: transform .5s linear 0s;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
    }
    .flip3D > .back {
      position: absolute;
      background: Salmon;
      width: 240px;
      height: 200px;
      border-radius: 7px;
      transform: perspective(600px) rotateY(180deg);
      -webkit-transform: perspective(600px) rotateY(180deg);
      -moz-transform: perspective(600px) rotateY(180deg);
      -o-transform: perspective(600px) rotateY(180deg);
      transition: transform .5s linear 0s;
      -webkit-transition: transform .5s linear 0s;
      -moz-transition: transform .5s linear 0s;
      -o-transition: transform .5s linear 0s;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
    }
    .flip3D:hover > .front {
      transform: perspective(600px) rotateY(-180deg);
      -webkit-transform: perspective(600px) rotateY(-180deg);
      -moz-transform: perspective(600px) rotateY(-180deg);
      -o-transform: perspective(600px) rotateY(-180deg);
    }
    .flip3D:hover > .back {
      transform: perspective(600px) rotateY(0deg);
      -webkit-transform: perspective(600px) rotateY(0deg);
      -moz-transform: perspective(600px) rotateY(0deg);
      -o-transform: perspective(600px) rotateY(0deg);
    }
    .chinese {
      text-align: center;
      font-size: 140%;
      font-weight: 900;
      margin-top:-40px;
    }
    .pinyin {
      text-align: center;
      font-size: 90%;
      margin-top:-50px;
    }
    .chinese_long {
      text-align: center;
      font-size: 122%;
      font-weight: 900;
      margin-top:-20px;
    }
    .pinyin_long {
      text-align: center;
      font-size: 90%;
      margin-top:-40px;
    }
    .chinese_xlong {
      text-align: center;
      font-size: 90%;
      font-weight: 900;
      margin-top: 15px;
    }
    .pinyin_xlong {
      text-align: center;
      font-size: 95%;
      margin-top:-5px;
    }
    div {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="flip3D">
    <div class="back"><h3>rain</h3></div>
    <div class="front"><div class="chinese"><h1>下雨</h1></div><div class="pinyin"><h3>xià&thinsp;yǔ</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>throw, lose</h3></div>
    <div class="front"><div class="chinese"><h1>丢</h1></div><div class="pinyin"><h3>qì&thinsp;chē</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>buy</h3></div>
    <div class="front"><div class="chinese"><h1>买</h1></div><div class="pinyin"><h3>mǎi</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>do</h3></div>
    <div class="front"><div class="chinese"><h1>做</h1></div><div class="pinyin"><h3>zuò</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>write</h3></div>
    <div class="front"><div class="chinese"><h1>写</h1></div><div class="pinyin"><h3>xiě</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>sell</h3></div>
    <div class="front"><div class="chinese"><h1>卖</h1></div><div class="pinyin"><h3>mài</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>happen</h3></div>
    <div class="front"><div class="chinese"><h1>发生</h1></div><div class="pinyin"><h3>fā&thinsp;shēng</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>eat</h3></div>
    <div class="front"><div class="chinese"><h1>吃</h1></div><div class="pinyin"><h3>chī</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>listen</h3></div>
    <div class="front"><div class="chinese"><h1>听</h1></div><div class="pinyin"><h3>tīng</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hear</h3></div>
    <div class="front"><div class="chinese"><h1>听见</h1></div><div class="pinyin"><h3>tīng&thinsp;jiàn</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>like</h3></div>
    <div class="front"><div class="chinese"><h1>喜欢</h1></div><div class="pinyin"><h3>xǐ&thinsp;huān</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>drink</h3></div>
    <div class="front"><div class="chinese"><h1>喝</h1></div><div class="pinyin"><h3>hē</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>sit</h3></div>
    <div class="front"><div class="chinese"><h1>坐</h1></div><div class="pinyin"><h3>zuò</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>learn</h3></div>
    <div class="front"><div class="chinese"><h1>学习</h1></div><div class="pinyin"><h3>xué&thinsp;xí</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>try</h3></div>
    <div class="front"><div class="chinese"><h1>尝试</h1></div><div class="pinyin"><h3>cháng&thinsp;shì</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>work</h3></div>
    <div class="front"><div class="chinese"><h1>工作</h1></div><div class="pinyin"><h3>gōng zuò</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>to help</h3></div>
    <div class="front"><div class="chinese"><h1>帮助</h1></div><div class="pinyin"><h3>bāng&thinsp;zhù</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hate</h3></div>
    <div class="front"><div class="chinese"><h1>恨</h1></div><div class="pinyin"><h3>hèn</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>jog</h3></div>
    <div class="front"><div class="chinese"><h1>慢跑</h1></div><div class="pinyin"><h3>màn&thinsp;pǎo</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hunt</h3></div>
    <div class="front"><div class="chinese"><h1>打猎</h1></div><div class="pinyin"><h3>dǎ&thinsp;liè</h3></div></div>
  </div>

<!--
-->

</body>
</html>