Cube Roll
Rolls over an edge like a cube turning to its next face.
Preview
Tune parameters
Full code
/* Cube Roll */
@keyframes cubeRoll {
0% { transform: perspective(600px) rotateX(0) translateY(0); }
50% { transform: perspective(600px) rotateX(-90deg) translateY(-128px); }
100% { transform: perspective(600px) rotateX(-180deg) translateY(0); }
}
.cube-roll { animation: cubeRoll 1s cubic-bezier(.65,0,.35,1) both; }