3D & Depth

Paneles dispuestos en anillo giran alrededor de un eje vertical en el espacio 3D.

Añade un carrusel 3D ("3D Carousel", también llamado rotating ring carousel) en [dónde].
Coloca los paneles en un anillo visto en perspectiva; cada pulsación de siguiente debe girar todo el anillo con suavidad sobre su eje vertical para traer el siguiente panel al frente.
Haz que los controles sean accesibles con el teclado, anuncia el panel actual a los lectores de pantalla y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una Tierra 3D giratoria con marcadores o arcos se integra en el diseño.

Añade un globo 3D ("3D Globe", también llamado interactive globe) en [dónde].
Un globo con algunos marcadores en su superficie debe girar lenta y constantemente sobre su eje, con los marcadores girando con él: tranquilo y continuo.
Mantenlo decorativo con una alternativa de texto para la información que muestra, páusalo cuando esté fuera de pantalla y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una tarjeta se inclina hacia atrás en perspectiva al pasar el cursor mientras un pin y un brillo se elevan hacia el espectador.

Añade un efecto hover "3D Pin" (también llamado pin hover 3D) en [dónde].
Cuando el cursor esté sobre la tarjeta, debe inclinarse hacia atrás en perspectiva mientras un pin con un brillo suave en la base sube desde su centro; todo vuelve a su sitio cuando el cursor sale: suave, sin rebote.
No cambies el espacio que ocupa la tarjeta en el diseño y muestra el mismo efecto con el foco del teclado.

Una tarjeta gira en perspectiva hacia el cursor, con contenido en capas que se separa de la superficie.

Añade un efecto "3D Tilt" (también llamado perspective tilt o tilt card) en [dónde].
La tarjeta debe inclinarse en perspectiva hacia el cursor mientras se mueve, con sus capas internas separándose de la superficie a distintas profundidades, y volver a quedar plana con suavidad cuando el cursor sale: suave y sutil.
Mantén la inclinación leve para que el texto siga legible y deja la tarjeta plana en pantallas táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.

Las tarjetas se apilan con pequeños desplazamientos y la de arriba se aparta para mostrar la siguiente.

Añade un "Card Stack" (también llamado stacked cards) en [dónde].
Apila las tarjetas con pequeños desplazamientos una detrás de otra; cada pulsación debe apartar la tarjeta de arriba hacia un lado y colocarla al fondo mientras las demás avanzan: suave, con una sensación ligera y rápida.
Haz que funcione con el teclado, deja que los lectores de pantalla lleguen a cada tarjeta en orden y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento central mira al frente mientras los laterales se inclinan en perspectiva.

Añade un carrusel "Coverflow" (también llamado cover flow carousel) en [dónde].
El elemento central debe mirar al frente mientras los de cada lado se giran en perspectiva; arrastrar de lado desplaza la fila y, al soltar, se asienta con suavidad en el elemento más cercano.
Admite las flechas del teclado y los gestos de deslizar además del arrastre, y mantén el scroll vertical de la página en pantallas táctiles.

El contenido está en las caras de un cubo que gira para mostrar la siguiente cara.

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).

Un reflejo brillante sigue al cursor por la superficie de una tarjeta como un destello de luz.

Añade un efecto "Glare / Holographic Card" (también llamado glare card o glare hover) en [dónde].
Un reflejo brillante y suave debe seguir al cursor por la superficie de la tarjeta como luz que rebota en ella, mientras la tarjeta se inclina un poco hacia el cursor; ambos desaparecen cuando el cursor sale: suave y sutil.
Deja que los clics atraviesen la capa del reflejo, mantén el contenido legible debajo y muestra la tarjeta sin reflejo en pantallas táctiles.