El elemento da una vuelta completa sobre el eje Y mientras se acerca un poco al espectador y vuelve.
Se usa en
Revelar una tarjeta o insignia llamando la atención
Añade una animación "Flip" en [dónde].
El elemento debe dar una vuelta completa sobre su eje vertical mientras se acerca un poco al espectador, y luego volver con una leve reducción de tamaño: vivo pero breve.
Dale perspectiva para que el giro se lea como profundidad, reprodúcela una sola vez en lugar de en bucle, y omite el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Flip In X, Flip In Y
El elemento gira en 3D sobre su eje horizontal o vertical, de estar de canto a quedar de frente al espectador.
Se usa en
Revelado de tarjetas y mosaicos
Añade una animación de entrada "Flip In" (también llamada flip in X o flip in Y) en [dónde].
El elemento debe empezar de canto y girar sobre su eje horizontal hasta quedar de frente, pasándose un poco y volviendo antes de asentarse: rápido, con un pequeño bamboleo.
Dale perspectiva para que el giro se lea como profundidad, y muéstralo de frente sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).
AGBHCIDJEKFL
Pasa el ratón por encima
También llamado 3D Flip Text Reveal
Las letras o palabras giran en 3D sobre un eje para mostrar el siguiente texto en su cara trasera.
Se usa en
Enlaces con hover y títulos
Añade un efecto hover "Text 3D Flip" (también llamado 3D flip text reveal) en [dónde].
Cuando el puntero esté sobre el texto, cada letra debe girar en 3D sobre su eje horizontal para mostrar una letra nueva en su otra cara, una tras otra en un barrido rápido y suave, y volver cuando el puntero salga.
Mantén el mismo tamaño de la caja de texto durante el giro y muestra el mismo efecto con el foco del teclado.
También llamado 3D cube, Cube transition
El contenido está en las caras de un cubo que gira para mostrar la siguiente cara.
Se usa en
Transiciones de slider, selectores de funciones
Añade una transición "Cube Rotate" (también llamada 3D cube o cube transition) en [dónde].
Coloca el contenido en las caras laterales de un cubo visto en perspectiva; cada pulsación de siguiente debe girar el cubo con suavidad sobre su eje vertical para traer la siguiente cara al frente.
Deja solo la cara frontal accesible para el teclado y los lectores de pantalla, y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).