Curl

Una tarjeta gira media vuelta sobre un eje para mostrar su cara trasera.

Añade un efecto "Card Flip" (también llamado flip card o card flip 3D) en [dónde].
Cuando el cursor esté sobre la tarjeta, debe darse la vuelta en perspectiva sobre su eje vertical para mostrar su cara trasera, y volver cuando el cursor sale: suave y constante.
Oculta la parte de atrás de cada cara para que nunca se transparenten entre sí, y haz que el giro funcione con el foco del teclado y con un toque en pantallas táctiles.

Una capa se desliza desde el lado por el que entró el cursor y sale hacia el lado por el que se va.

Añade un efecto "Direction Aware Hover" (también llamado direction-aware overlay) en [dónde].
Una capa superpuesta debe deslizarse desde el lado por el que entró el cursor y salir hacia el lado por el que se va: rápido y suave.
Calcula el lado a partir de la posición del cursor al entrar y al salir y, con toque o foco del teclado, usa una dirección por defecto.

Los iconos de una fila crecen suavemente a medida que se acerca el cursor, como el Dock de macOS.

Añade un efecto "Dock Magnification" (también llamado dock) en [dónde].
Los iconos de la fila deben crecer suavemente a medida que se acerca el cursor, con el más cercano como el más grande y sus vecinos algo agrandados, y volver todos a su tamaño normal cuando el cursor sale.
Haz que los iconos crezcan hacia arriba desde una línea base fija y que todos sigan siendo usables a su tamaño normal con toque y teclado.

El elemento sube unos píxeles al pasar el cursor, como si flotara.

Añade un efecto hover "Float" (también llamado lift o raise) en [dónde].
El elemento debe subir un poco y quedarse elevado mientras el cursor está encima, y volver a su sitio cuando sale: suave y delicado, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.