立方體翻滾
模擬立方體繞一條邊翻滾到下一面。
效果預覽
參數調節
完整代碼
/* 立方體翻滾 */
@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; }