SOURCE

var time;
showTime();
function showTime() {
	var show_day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五',
			'星期六');
	var today = new Date();
	var s = today.getSeconds();
	var year = today.getFullYear();
	var month = today.getMonth() + 1;
	var day = today.getDate();
	var hour = today.getHours();
	var minutes = today.getMinutes();
	var second = today.getSeconds();

	// month < 10 ? month = '0' + month : month;
	day < 10 ? day = '0' + day : day;
	hour < 10 ? hour = '0' + hour : hour;
	minutes < 10 ? minutes = '0' + minutes : minutes;
	second < 10 ? second = '0' + second : second;
	var ymd = year + '.' + month + '.' + day;
	var hm = hour + ':' + minutes;
	var week = show_day[today.getDay()];
	// 今天的日期
	$("#week").html(week);
	$("#ymdhm").html(ymd + " " + hm);
	time=year+""+month+""+day+""+hour+""+minutes+""+second;
	setTimeout("showTime();", 1000);

}
function push(){
  var id = time+"-face";
  var data='<div id="'+id+'" 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>';
			$("#companyPersonDiv").append(data);
  setTimeout("removeThis("+id+")",4000);
  if($(".base-face-div").length>3){
				$(".base-face-div").first().remove();
	}
}

function removeThis(id){
	$("#"+id).remove();
}

<fmt:formatDate value="${now}" var="nowTime" pattern="yyyyMMddHHmmsss" />
<div class="card">
  <div class="item-div" id="baseFace" style="z-index: 2; text-align: center;">
    <div style="overflow: hidden; display:inline-blockl; height:420px;" id="companyPersonDiv">
      
    </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;
//ansform: rotateX(180deg);
  opacity: 1;
}

#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;
}