跳到主要内容

悬停立体

鼠标悬浮触发

沿 Z 轴上抬并轻微俯仰,做出离屏幕更近的错觉。

把鼠标移到方块上
这一条靠 :hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 悬停立体 */
.anim-hover-lift-3d {
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.anim-hover-lift-3d:hover {
  transform: perspective(500px) translateZ(28px) rotateX(6deg);
}