X 軸翻轉
繞水平軸翻轉 180 度,需要透視才有立體感。
效果預覽
參數調節
完整代碼
/* X 軸翻轉 */
@keyframes flipX {
from { transform: perspective(600px) rotateX(0); }
to { transform: perspective(600px) rotateX(180deg); }
}
.flip-x { animation: flipX .7s ease-in-out both; }