# Diseña interacciones con Liquid Glass y transformaciones 3D en Hana - Hana | Todo lo que necesitas saber - Spline Academy (https://spline.design/es/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana)

> ¡Hola! 👋

1. [Academy](https://spline.design/es/academy)
2. [Cursos](https://spline.design/es/academy/collections)
3. [Hana | Todo lo que necesitas saber](https://spline.design/es/academy/collections/hana-everything-you-need-to-know)
4. Diseña interacciones con Liquid Glass y transformaciones 3D en Hana

# Diseña interacciones con Liquid Glass y transformaciones 3D en Hana

Lección 3 de 15HanaPrincipiante16 min

¡Hola! 👋

En este tutorial aprenderás a usar los últimos efectos de liquid glass de Spline Hana para crear microinteracciones de interfaz. También veremos cómo usar las herramientas de proyección 3D para crear diseños impresionantes que aprovechan la perspectiva 3D.

## Lo que aprenderás

1. [0:00Introducción](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=0s)
2. [0:34Crear un interruptor de Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=34s)
3. [2:28Añadir el efecto Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=148s)
4. [5:00Crear la interacción](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=300s)
5. [6:33Más sobre las novedades de Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=393s)
6. [7:10Crear cristal apilable](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=430s)
7. [10:00Cómo exportar tu diseño de Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=600s)
8. [10:12Experimentar con formas personalizadas](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=612s)
9. [10:32Crear un efecto de lupa con Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=632s)
10. [10:51Explorar las proyecciones 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=651s)
11. [11:13Crear un portal 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=673s)
12. [12:16Cómo crear un carrusel 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=736s)
13. [13:33Consejo extra](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=813s)
14. [13:38Auto Layout](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=818s)
15. [15:15Cierre](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=915s)

## Recursos relacionados

- [Vertical Glass StackPlantilla](https://app.spline.design/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana?redirect-duplicate-template-uuid=cca331bd-acd6-4cb2-9d62-c3a376d6a526&is-2d-file=true)
- [3D TransformDocumento](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%A7%8A-3d-transform)
- [Effects in HanaDocumento](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana#liquid-glass)

## Resumen

- Hana
- 16 min
- Principiante

## A continuación

[Explora las proyecciones 3D y los efectos de ruido8 minPrincipiante](https://spline.design/es/academy/collections/hana-everything-you-need-to-know/explore-3d-projections-and-noise-effects)[Continuar](https://spline.design/es/academy/collections/hana-everything-you-need-to-know/explore-3d-projections-and-noise-effects)

[Spline](https://spline.design/es)

El editor 3D y 2D para equipos y sus agentes. Publica en la web, iOS y Android.

#### Pregúntale a la IA sobre Spline

#### Productos

- [Diseño 3D](https://spline.design/es/3d-design)
- [Hana](https://spline.design/es/hana)
- [Omma](https://omma.build)
- [Generación 3D con IA](https://spline.design/es/ai-generate)
- [Spline MCP](https://spline.design/es/mcp)
- [Spline Arena](https://spline.design/es/arena)
- [Precios](https://spline.design/es/pricing)
- [Enterprise](https://spline.design/es/enterprise)

#### Runtimes

- [Web](https://spline.design/es/web)
- [iOS](https://spline.design/es/ios)
- [Android](https://spline.design/es/android)

#### Apps

- [Descargar](https://spline.design/es/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Descargar Spline Mirror](https://spline.design/download-mirror)

#### Aprende

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/es/academy)
- [API de Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Soluciones](https://spline.design/solutions)

#### Comunidad

- [Comunidad de Spline](https://community.spline.design)
- [Blog](https://spline.design/es/blog)
- [Novedades](https://spline.design/es/changelog)
- [Educación](https://spline.design/es/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/es/affiliate)

#### Empresa

- [Clientes](https://spline.design/es/customers)
- [Empleo](https://www.ycombinator.com/companies/spline/jobs)
- [Seguridad](https://spline.design/es/security)

#### Legal

- [Términos y condiciones](https://spline.design/terms)
- [Privacidad](https://spline.design/privacy)

#### Contacto

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.