悬浮翻转
鼠标悬浮触发移入时绕 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);
}