懸浮翻轉
滑鼠移入觸發移入時繞 Y 軸翻轉半圈,適合正反面資訊切換。
把滑鼠移到方塊上
這一條靠
:hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的
transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 懸浮翻轉 */
.anim-hover-flip-half {
transition: transform .5s cubic-bezier(.22,.61,.36,1);
transform-style: preserve-3d;
}
.anim-hover-flip-half:hover {
transform: perspective(600px) rotateY(180deg);
}