Flip clock

by wittnl

HTML

<div class="stack">
  <div class="number-card number-top">8</div>
  <div class="number-card">8</div>
</div>

CSS

.stack {
  position: relative;
}

.number-card {
  position: absolute;
  background: #1e1e1e;
  color: white;
  border-radius: 0.1em;
  display: flex;
  font-size: 50vh;
  width: 1em;
  justify-content: center;
  font-family: Helvetica, Verdana, sans-serif;
}

.number-top {
    z-index: 1;
    transition: transform 0.2s ease-in;
    overflow: hidden;
    height: 0.5em;
}

.number-top:hover {
  transform: rotateX(90deg);
}