flip-clock.css

.flip-clock {
  display: inline-block;
  margin-right: 5px;
  height: 165px;
  min-width: 86px;
  perspective: 240px;
  perspective-origin: 50% 50%;
}

.flip-clock div{
  position:      absolute;
  color:         white;
  background:    black;
  min-width:     86px;
  height:        50px;
  font-size:     60px;
  text-align:    center;
  margin:        6px;
  line-height:   100px;
  overflow:      hidden;
  -moz-box-shadow:    3px 3px 3px #111;
  -webkit-box-shadow: 3px 3px 3px #111;
  box-shadow:         3px 3px 3px #111;
}

.flip-top {
  border-radius: 9px 9px 0px 0px;
  top: 0px;

}
.flip-bottom {
  border-radius: 0px 0px 9px 9px;
  top: 50px;
  border-top: 1px solid transparent;
}
.flip-bottom span{
  display: block;
  margin-top: -50px;
}

.flip-front {
  z-index: 999;
}

.flip-back {
  z-index: 998
}

.flip-top.flip-front{
  transform-origin: 50% 100%;
}
.flip-bottom.flip-front{
  transform-origin: 50% 0%;
}


.flip-top-animate {
  animation-name: fliptop;
  animation-timing-function: ease-in;
  animation-duration: 0.4s;
}

.flip-bottom-animate {
  animation-name: flipbottom;
  animation-timing-function: ease-out;
  animation-duration: 0.4s;
}

@keyframes fliptop {
    0%   {
      transform: rotateX(0deg);
    }
    100% {
      transform: rotateX(-90deg);
    }
}

@keyframes flipbottom {
    0%   {
      transform: rotateX(90deg);
    }
    100% {
      transform: rotateX(0deg);
    }
}

/* Start of Flip Clock small CSS */

.flip-clock.flipclock-small {
  position:      absolute;
  bottom: 0;
  margin-right: 0px;
  height: 60px;
  min-width: 43px;
}

.flip-clock.flipclock-small div{
  min-width:     177px;
  height:        25px;
  font-size:     35px;
  font-weight:   bold;
  margin:        6px;
  line-height:   50px;
}

.flipclock-small .flip-top {
  border-radius: 9px 9px 0px 0px;
  top: 0px;

}
.flipclock-small .flip-bottom {
  border-radius: 0px 0px 9px 9px;
  top: 25px;
}
.flipclock-small .flip-bottom span{
  display: block;
  margin-top: -25px;
}

/* End of Flip Clock small CSS */