# Diseña interacciones con Liquid Glass y transformaciones 3D en Hana - 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. [Tutoriales](https://spline.design/es/academy/tutorials)
3. Diseña interacciones con Liquid Glass y transformaciones 3D en Hana

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

HanaPrincipiante16 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

## Parte de

- [Hana | Todo lo que necesitas saber](https://spline.design/es/academy/collections/hana-everything-you-need-to-know/design-interactions-with-liquid-glass-3d-transforms-in-hana)

## Tutoriales relacionados

[Todos los tutoriales](https://spline.design/es/academy/tutorials)

[Crea materiales de Liquid Glass en 3DSpline 3DPrincipiante12 min](https://spline.design/es/academy/tutorials/create-liquid-glass-materials-in-3d)[Crea iconos 3D con vectoresSpline 3DPrincipiante10 min](https://spline.design/es/academy/tutorials/build-3d-icons-with-vectors)[Crea texto 3D refractivo en HanaHanaPrincipiante7 min](https://spline.design/es/academy/tutorials/creating-refractive-3d-text-in-hana)

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