#swing-container {
  display: flex;
  
}

#input {
  display: none;
}

#inputText {
  height: 30px;
  border-radius: 5px;
}

#swing-container div {
  display: inline-block;
  height: 1rem;
  width: 0.75rem;
  -webkit-perspective: 1000px; /* Safari 4-8  */
  -webkit-perspective-origin: top; /* Safari 4-8  */    
  perspective: 1000px;
  perspective-origin: top;
}

.swing-inner {
  height: 48px;
  width: 0.8rem;
  font-size: 28px;
}

.swing-animate {
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */   
  -webkit-transform: rotateX(0deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transform-origin: top;
  animation-name: swing;
  animation-duration: 2s;
}

@keyframes swing {
  0%    {transform: rotateX(90deg)}
  25%   {transform: rotateX(-80deg)}
  50%   {transform: rotateX(80deg)}
  70%   {transform: rotateX(-40deg)}
  90%   {transform: rotateX(20deg)}
  100%  {transform: rotateX(0deg)}
}