X 軸翻入
從背面翻轉到正面並淡入。
效果預覽
參數調節
完整代碼
/* X 軸翻入 */
@keyframes flipInX {
from { opacity: 0; transform: perspective(600px) rotateX(-90deg); }
to { opacity: 1; transform: perspective(600px) rotateX(0); }
}
.flip-in-x { animation: flipInX .7s ease-out both; }