立方体翻滚
模拟立方体绕一条边翻滚到下一面。
效果预览
参数调节
完整代码
/* 立方体翻滚 */
@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; }