Skip to main content

Hover Flip

Hover to trigger

Flips half a turn on the Y axis — good for front/back info swaps.

Move the pointer over the box
Triggered by :hover and never auto-plays on load. Move the pointer in and out to watch it again.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on transition / animation — change the numbers in the code below.
Full code
/* Hover Flip */
.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);
}