<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();