<h1 class="flip-3d" data-splitting>3D Flip Effect</h1>
.flip-3d {

  .char {
    transition: transform 0.6s cubic-bezier(.6,0,0,.6);
    transition-delay: calc( 0.3s * ( 1 - var(--distance-percent)) );
    transition-delay: calc( 0.3s * var(--distance-percent) );
  }

  &:hover .char {
    transform: rotateX(-1turn);
    transition-duration: 1s;
    transition-delay: calc( 0.3s * var(--distance-percent) );
    transition-delay: calc( 0.3s * ( 1 - var(--distance-percent)) );
  }
}

.flip-3d {
  perspective: 200px;
  transform-style: preserve-3d;
}
View Compiled
console.clear();

var s = Splitting();

External CSS

  1. https://unpkg.com/splitting@1.0.0/dist/splitting.css

External JavaScript

  1. https://unpkg.com/splitting@1.0.0/dist/splitting.js