<!DOCTYPE html>
<!-- https://www.youtube.com/watch?v=W3eJWpvIl0g -->
<!-- http://mylanguages.org/chinese_adverbs.php -->
<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>very</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>very much</h3></div>
    <div class="front"><div class="chinese"><h1>非常</h1></div><div class="pinyin"><h3>fēi&thinsp;cháng</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>quite</h3></div>
    <div class="front"><div class="chinese"><h1>相当</h1></div><div class="pinyin"><h3>xiāng&thinsp;dāng</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>quite, rather</h3></div>
    <div class="front"><div class="chinese"><h1>颇</h1></div><div class="pinyin"><h3>pō</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>truly</h3></div>
    <div class="front"><div class="chinese_long"><h1>真正地</h1></div><div class="pinyin_long"><h3>zhēn&thinsp;zhèng&thinsp;de</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>truly</h3></div>
    <div class="front"><div class="chinese_long"><h1>确实地</h1></div><div class="pinyin_long"><h3>què&thinsp;shí&thinsp;de</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>quickly</h3></div>
    <div class="front"><div class="chinese_long"><h1>快速地</h1></div><div class="pinyin_long"><h3>kuài&thinsp;sù&thinsp;de</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>quickly</h3></div>
    <div class="front"><div class="chinese_long"><h1>迅速地</h1></div><div class="pinyin_long"><h3>xùn&thinsp;sù&thinsp;de</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>well, OK</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>hard</h3></div>
    <div class="front"><div class="chinese_long"><h1>努力地</h1></div><div class="pinyin_long"><h3>nǔ&thinsp;lì&thinsp;dì</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>quickly</h3></div>
    <div class="front"><div class="chinese"><h1>很快</h1></div><div class="pinyin"><h3>hěn&thinsp;kuài</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>slowly</h3></div>
    <div class="front"><div class="chinese_long"><h1>慢慢地</h1></div><div class="pinyin_long"><h3>màn&thinsp;màn&thinsp;de</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>carefully</h3></div>
    <div class="front"><div class="chinese_long"><h1>小心地</h1></div><div class="pinyin_long"><h3>xiǎo&thinsp;xīn&thinsp;dì</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>seriously</h3></div>
    <div class="front"><div class="chinese_long"><h1>认真地</h1></div><div class="pinyin_long"><h3>rèn&thinsp;zhēn&thinsp;de</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>hardly, barely</h3></div>
    <div class="front"><div class="chinese_long"><h1>几乎不</h1></div><div class="pinyin_long"><h3>jī&thinsp;hū&thinsp;bù</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>mostly</h3></div>
    <div class="front"><div class="chinese_long"><h1>大部分</h1></div><div class="pinyin_long"><h3>dà&thinsp;bù&thinsp;fēn</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>mainly, primarily</h3></div>
    <div class="front"><div class="chinese_long"><h1>主要地</h1></div><div class="pinyin_long"><h3>zhǔ&thinsp;yào&thinsp;de</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>almost</h3></div>
    <div class="front"><div class="chinese"><h1>几乎</h1></div><div class="pinyin"><h3>jī&thinsp;hū</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>absolutely</h3></div>
    <div class="front"><div class="chinese"><h1>绝对</h1></div><div class="pinyin"><h3>jué&thinsp;duì</h3></div></div>
  </div>
  <div class="flip3D">
    <div class="back"><h3>together</h3></div>
    <div class="front"><div class="chinese"><h1>一起</h1></div><div class="pinyin"><h3>yī&thinsp;qǐ</h3></div></div>
  </div>

  <div class="flip3D">
    <div class="back"><h3>alone</h3></div>
    <div class="front"><div class="chinese"><h1>单</h1></div><div class="pinyin"><h3>dān</h3></div></div>
  </div>

<!--
-->

</body>
</html>