SOURCE

var flushChange;
var flushChangeVIP;

function change(type) {
  if (type == 1) { //vip
    if (flushChange != null) {
        clean();
      } 
    if (flushChangeVIP != null) {
      clearTimeout(flushChangeVIP);
    }
     $(".card").addClass("flippedVip");
      flushChangeVIP = setTimeout("cleanVip()", 8000);
  } else if (type == 2) { //公司
    //if (flushChangeVIP == null) {
      if (flushChange == null) {
        $(".card").addClass("flipped");
        flushChange = setTimeout("clean()", 8000);
      } else {
        clearTimeout(flushChange);
        flushChange = setTimeout("clean()", 8000);
      }
    //}
  }
}
function clean() {
  $(".card").removeClass("flipped");
  flushChange = null;
}

function cleanVip() {
  $(".card").removeClass("flippedVip");
  flushChangeVIP = null;
}

<div class="card">
  <div class="item-div" id="bannerDiv" style="z-index: 1;">
    <div id="slideBox" class="slideBox">
      <div class="hd">
        哈哈
      </div>
      <div class="bd">
        <ul>
          <li>
            <a href="http://www.SuperSlide2.com" target="_blank">
              <img src="http://www.superslide2.com/demo/images/pic1.jpg" />
            </a>
          </li>
          <li>
            <a href="http://www.SuperSlide2.com" target="_blank">
              <img src="http://www.superslide2.com/demo/images/pic2.jpg" />
            </a>
          </li>
          <li>
            <a href="http://www.SuperSlide2.com" target="_blank">
              <img src="http://www.superslide2.com/demo/images/pic3.jpg" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="item-div" id="baseFace" style="z-index: 2; text-align: center;">
    <div style="overflow: hidden; display: inline-block">
      <div class="base-face-div normal">
        <div class="person-name-font-en">
          JIANGJINFU
        </div>
        <div class="face-circle-div">
        </div>
        <div style="margin-top: -160px;position: relative;">
          <img class="face-img-div" src="http://192.168.250.199/file/ZYYHY//acm/faceDatabase/2018/09/05/D/1536146635790.jpg ">
        </div>
        <div class="person-name-font-cn">
          蒋劲夫
        </div>
        <div class="job-name-cn">
          研发部－JAVA工程师
        </div>
        <div class="tips-cn">
          请记得上下班打卡！
        </div>
        <div class="tips-en">
          Please remember to clock out!
        </div>
      </div>
      <div class="base-face-div later">
      </div>
      <div class="base-face-div normal">
      </div>
    </div>
  </div>
  <div class="item-div" id="vipFace" style="z-index: 3;">
    <div class="vip-face-div">
      <div class="vip-name-font-en">
        JIANGJINFU
      </div>
      <div class="vip-face-circle-div">
      </div>
      <div style="margin-top: -235px; position: relative; margin-left: 135px; position: relative;">
        <img class="vip-face-img-div" src="http://192.168.250.199/file/ZYYHY//acm/faceDatabase/2018/09/05/D/1536146635790.jpg ">
        <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
        <svg width="87px" height="41px" style="position: absolute;margin-left: -145px;top: 180px;"
        viewBox="0 0 87 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch
          -->
          <title>
            Group 6
          </title>
          <desc>
            Created with Sketch.
          </desc>
          <defs>
            <circle id="path-1" cx="105" cy="105" r="105">
            </circle>
          </defs>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="VIP弹窗" transform="translate(-227.000000, -648.000000)">
              <g id="card" transform="translate(24.000000, 444.000000)">
                <g id="Group-5" transform="translate(122.000000, 20.000000)">
                  <g id="Group-6" transform="translate(15.000000, 15.000000)">
                    <mask id="mask-2" fill="white">
                      <use xlink:href="#path-1">
                      </use>
                    </mask>
                    <use id="Oval-3" fill="#FFFFFF" opacity="0" xlink:href="#path-1">
                    </use>
                    <path d="M144.149186,169 L74.7050054,169 C69.8973637,169 66,172.925829 66,177.768586 L66,206.231414 C66,211.074171 69.8973637,215 74.7050054,215 L144.149186,215 C148.956525,215 153,211.076058 153,206.233607 L153,177.768586 C153,172.926134 148.956525,169 144.149186,169 Z M86.0628612,205.948628 C84.9725592,205.948628 84.0258899,204.905166 83.2272056,202.820435 L72.528754,177.735703 L81.2337594,177.735703 L87.5035396,195.038315 L96.7330215,177.735703 L105.172524,177.735703 L89.6602046,202.859893 C88.3522775,204.918319 87.1553393,205.948628 86.0628612,205.948628 Z M100.820022,206.233607 L107.348776,177.735703 L113.879706,177.735703 L107.348776,206.233607 L100.820022,206.233607 Z M144.960928,188.319386 C144.534382,191.42785 143.124171,193.94005 140.745529,195.875715 C138.466994,197.703965 134.271181,197.465021 131.283188,197.465021 L120.401931,197.465021 L118.22568,206.233607 L111.696926,206.233607 L116.049428,190.888582 L133.459439,190.888582 C134.386522,190.888582 136.218926,191.232749 136.937089,190.638677 C137.650899,190.046798 138.077445,189.259817 138.216725,188.28212 C138.351652,187.306615 138.142732,186.532787 137.583435,185.965021 C137.030668,185.399447 136.560597,184.312143 135.637867,184.312143 L116.051605,184.312143 L122.580359,177.735703 L135.637867,177.735703 C138.610626,177.735703 141.074143,178.934807 142.847787,180.767442 C144.68672,182.703107 145.394002,185.217499 144.960928,188.319386 Z"
                    id="Shape" fill="#FFD000" fill-rule="nonzero" mask="url(#mask-2)">
                    </path>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </div>
      <div class="vip-name-font-cn">
        刘先生
      </div>
      <div class="vip-tips">
        欢迎贵宾到访！
      </div>
    </div>
  </div>
</div>

html {
  font-family: SimHei;
  margin: 0px;
  padding: 0px;
}

.body_theme {
  background-image: url("../img/projectFace/background.png");
  background-repeat: no-repeat;
  background-size: 1080px 1920px;
  margin: 0px;
  overflow: hidden;
  width: 1080px;
  height: 1920px;
}

.title-logo {
  width: 1080px;
  height: 120px;
  position: relative;
  text-align: center;
}

.head-content {
  height: 184px;
  padding-left: 40px;
  padding-right: 44px;
}

.notice-div {
  width: 1080px;
  height: 100px;
}

.notice-message {
  width: 930px;
  float: left;
  height: 100px;
  line-height: 100px;
  font-size: 36px;
  color: #1AC2DB;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.40);
  padding-left: 44px;
}

.item-div {
  position: absolute;
  width: 1080px;
  height: 420px;
}

.video_iframe {
  height: 609px;
  overflow: hidden;
  border: 8px solid #ddd;
  border-image: -webkit-linear-gradient(#00B2AB, #002CFF) 100 100;
  border-image: -moz-linear-gradient(#00B2AB, #002CFF) 100 100;
  border-image: linear-gradient(#00B2AB, #002CFF) 100 100;
}

.videl_default {
  background: url('../environment/rongchuang/black.png');
  width: 1080px;
  height: 609px;
  overflow: hidden;
}

.slideBox {
  width: 1032px;
  height: 420px;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.slideBox .hd {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  width: 1032px;
  height: 420px;
  line-height: 420px;
  font-size: 64px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.50);
}

.slideBox .bd {
  position: relative;
  height: 100%;
  z-index: 0;
}

.slideBox .bd li {
  zoom: 1;
  vertical-align: middle;
}

.slideBox .bd img {
  width: 1032px;
  height: 420px;
  display: block;
}

img {
  border: 0;
}

a {
  text-decoration: none;
  color: #333;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.base-face-div {
  width: 328px;
  height: 420px;
  border-radius: 16px;
  margin: 0 12px;
  float: left;
}

.normal {
  background-image: linear-gradient(-142deg, #1A92FF 0%, #13E4D9 100%);
}

.later {
  background-image: linear-gradient(39deg, #FFA76B 0%, #FF4949 100%);
}

.person-name-font-en {
  opacity: 0.13;
  font-size: 80px;
  color: #FFFFFF;
  width: 328px;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
}

.face-circle-div {
  opacity: 0.3;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.40) 0%, #FFFFFF 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 72, 104, 0.50);
  width: 160px;
  height: 160px;
  border-radius: 80px;
  margin: -36px auto;
}

.face-img-div {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  margin: 10px auto;
}

.person-name-font-cn {
  font-size: 36px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.19);
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 16px;
}

.job-name-cn {
  text-align: center;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  height: 28px;
  line-height: 28px;
  width: 100%;
  margin-top: 8px;
}

.tips-cn {
  font-size: 24px;
  color: #FFFFFF;
  letter-spacing: 0;
  height: 33px;
  line-height: 33px;
  margin-top: 61px;
  padding-left: 66px;
  text-align: left;
}

.tips-en {
  opacity: 0.44;
  font-size: 14px;
  color: #FFFFFF;
  padding-left: 68px;
  letter-spacing: 0;
  line-height: 12px;
  text-align: left;
}

.vip-face-div {
  background-image: linear-gradient(142deg, #1A92FF 0%, #13E4D9 100%);
  border-radius: 16px;
  width: 1032px;
  height: 420px;
  margin: auto;
}

.vip-name-font-en {
  opacity: 0.13;
  font-size: 200px;
  color: #FFFFFF;
  letter-spacing: 19.1px;
  height: 120px;
  line-height: 80px;
  overflow: hidden;
}

.vip-face-circle-div {
  opacity: 0.3;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.40) 0%, #FFFFFF 100%);
  box-shadow: 0 3px 12px 0 rgba(0, 72, 104, 0.50);
  width: 240px;
  height: 240px;
  border-radius: 120px;
  margin: -100px 120px;
}

.vip-face-img-div {
  width: 210px;
  height: 210px;
  border-radius: 105px;
  margin: 10px auto;
}

.vip-name-font-cn {
  font-size: 64px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.19);
  margin-top: -200px;
  margin-left: 390px;
  width: 260px;
  text-align: left;
}

.vip-company-name {
  font-size: 36px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
}

.vip-tips {
  font-size: 72px;
  color: #FFFFFF;
  letter-spacing: 34.42px;
  text-align: center;
  width: 745px;
  height: 95px;
  margin-left: 190px;
  line-height: 95px;
  position: absolute;
  margin-top: 180px;
  opacity: 0.66;
}

.env-charts-div {
  height: 408px;
  position: relative;
}

.charts-item {
  float: left;
  width: 360px;
  height: 100%;
}

.hover-charts {
  position: absolute;
  width: 220px;
  height: 220px;
  z-index: -1;
  display: none;
}

.dataName {
  width: 100%;
  height: 25px;
  line-height: 25px;
  opacity: 0.6;
  font-size: 21px;
  color: #1DDCC8;
  letter-spacing: 0;
  text-align: center;
  margin-top: 36px;
}

.item_state_class {
  font-size: 20px;
  color: #0ADDC6;
  letter-spacing: 0;
  text-align: center;
  margin-top: 12px;
}

.message {
  position: absolute;
  width: 1080px;
  text-align: right;
  padding-right: 15px;
  color: #242424;
  background-color: #cccccc;
  font-size: 15px;
}

#vipFace {
  transition: opacity 0.5s;
  transform: rotateX(-180deg);
  opacity: 0;
}

#baseFace {
  transition: all 0.5s;
  transform: rotateX(180deg);
  opacity: 0;
}

#bannerDiv {
  transition: all 0.5s;
}

.flipped #vipFace {
  opacity: 0;
}

.flipped #baseFace {
  opacity: 1;
}

.flipped #bannerDiv {
  opacity: 0;
}

.card {
  height: 420px;
  padding: 40px 0px 40px 0px;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flipped {
  transform: rotateX(180deg);
}

.flippedVip {
  transform: rotateX(180deg);
}

.flippedVip #vipFace {
  opacity: 1;
}

.flippedVip #baseFace {
  opacity: 0;
}

.flippedVip #bannerDiv {
  opacity: 0;
}