CSS 3D-анимация с эффектом вертикального переворота выглядит неправильно

Я пытаюсь добиться этого стиля эффекта вертикального переворота https://codepen.io/kanishkkunal/pen/wgEBgX

SCSS по приведенной выше ссылке преобразован в CSS:

a:hover, a:focus {
  color: #222;
}
a.flip-animate {
  perspective: 1000px;
}
a.flip-animate span {
  position: relative;
  display: inline-block;
  padding: 0;
  transition: transform 0.3s;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
a.flip-animate span:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  content: attr(data-hover);
  transition: color 0.3s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  text-align: center;
}
a.flip-animate:hover span, a.flip-animate:focus span {
  transform: rotateX(90deg) translateY(-22px);
}
a.flip-animate:hover span:before, a.flip-animate:focus span:before {
  color: #d24936;
}

Но используя два div, как в этом эффекте переворота https://davidwalsh.name/css-flip

Я пытался объединить их в jsfiddle, но мне не кажется, что анимация выглядит правильно. Хотя эффект codepen выглядит так, как будто он включает 3D-блок, мой просто выглядит как два слова вращаются независимо друг от друга. https://jsfiddle.net/gibsonion/jskmp8v2/58/