.flip-unit{width:50px;height:60px;display:inline-block;position:relative}.flip-card{backface-visibility:hidden;color:#fff;background:#333;border-radius:6px;justify-content:center;align-items:center;width:100%;height:100%;font-size:2rem;display:flex;position:absolute}.flip-card.top{transform-origin:bottom;z-index:2}.flip-card.bottom{transform-origin:top;transform:rotateX(90deg)}.flip.flip-unit .top{animation:.3s forwards flipTop}.flip.flip-unit .bottom{animation:.3s .3s forwards flipBottom}@keyframes flipTop{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flipBottom{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}