<!DOCTYPE html>
<!-- https://www.youtube.com/watch?v=W3eJWpvIl0g -->
<!-- http://http://www.chinese-tools.com/chinese/vocabulary/list/131/animal-sounds.html -->
<html>
<head>
  <style media="screen" type="text/css">
    html {
      font-family: sans-serif, FangSong, "仿宋", STKaiti, "华文楷体";
      font-style: bold;
      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;
    }
    div {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="flip3D">
    <div class="back"><h3>bark (dog)</h3></div>
    <div class="front"><div class="chinese"><h1>吠</h1></div><div class="pinyin"><h3>fèi</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>quack (duck)</h3></div>
    <div class="front"><div class="chinese"><h1>嘎嘎</h1></div><div class="pinyin"><h3>gá&thinsp;gá</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>howl, bawl</h3></div>
    <div class="front"><div class="chinese"><h1>嚎</h1></div><div class="pinyin"><h3>háo</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>roar (lion)</h3></div>
    <div class="front"><div class="chinese"><h1>吼</h1></div><div class="pinyin"><h3>hǒu</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>grumble</h3></div>
    <div class="front"><div class="chinese"><h1>叽</h1></div><div class="pinyin"><h3>jī</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>cry (crane/goose)</h3></div>
    <div class="front"><div class="chinese"><h1>唳</h1></div><div class="pinyin"><h3>lì</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>sound to call cat</h3></div>
    <div class="front"><div class="chinese"><h1>咪</h1></div><div class="pinyin"><h3>mī</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>meow (cat)</h3></div>
    <div class="front"><div class="chinese"><h1>喵</h1></div><div class="pinyin"><h3>miāo</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>bleating (sheep)</h3></div>
    <div class="front"><div class="chinese"><h1>咩</h1></div><div class="pinyin"><h3>miē</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>moo (cow)</h3></div>
    <div class="front"><div class="chinese"><h1>哞</h1></div><div class="pinyin"><h3>mōu</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hiss</h3></div>
    <div class="front"><div class="chinese"><h1>咝</h1></div><div class="pinyin"><h3>sī</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hiss, neigh</h3></div>
    <div class="front"><div class="chinese"><h1>嘶</h1></div><div class="pinyin"><h3>sī</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>mourn, cry, hoof</h3></div>
    <div class="front"><div class="chinese"><h1>啼</h1></div><div class="pinyin"><h3>tí</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hiss, whistle</h3></div>
    <div class="front"><div class="chinese"><h1>浅</h1></div><div class="pinyin"><h3>xiào</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>bird call</h3></div>
    <div class="front"><div class="chinese"><h1>嘤</h1></div><div class="pinyin"><h3>yīng</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>chirp, noise, clamor</h3></div>
    <div class="front"><div class="chinese"><h1>噪</h1></div><div class="pinyin"><h3>zào</h3></div></div>
  </div>

<!--
-->

</body>
</html>