# Desenha interações com Liquid Glass e transformações 3D no Hana - Hana | Tudo o que precisas de saber - Spline Academy (https://spline.design/pt-pt/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana)

> Olá! 👋

1. [Academy](https://spline.design/pt-pt/academy)
2. [Cursos](https://spline.design/pt-pt/academy/collections)
3. [Hana | Tudo o que precisas de saber](https://spline.design/pt-pt/academy/collections/hana-everything-you-need-to-know)
4. Desenha interações com Liquid Glass e transformações 3D no Hana

# Desenha interações com Liquid Glass e transformações 3D no Hana

Lição 3 de 15HanaPrincipiante16 min

Olá! 👋

Neste tutorial, vais aprender a usar os mais recentes efeitos de liquid glass do Spline Hana para criar microinterações de interface. Vamos também ver como usar as ferramentas de projeção 3D para criar designs impressionantes que tiram partido da perspetiva 3D.

## O que vais aprender

1. [0:00Introdução](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=0s)
2. [0:34Construir um interruptor em Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=34s)
3. [2:28Adicionar o efeito Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=148s)
4. [5:00Criar a interação](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=300s)
5. [6:33Mais sobre as atualizações do Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=393s)
6. [7:10Construir vidro empilhável](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=430s)
7. [10:00Como exportar o teu design do Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=600s)
8. [10:12Experimentar com formas personalizadas](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=612s)
9. [10:32Criar um efeito de lupa com Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=632s)
10. [10:51Explorar as projeções 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=651s)
11. [11:13Construir um portal 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=673s)
12. [12:16Como criar um carrossel 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=736s)
13. [13:33Dica bónus](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=813s)
14. [13:38Auto Layout](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=818s)
15. [15:15Encerramento](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=915s)

## Recursos relacionados

- [Vertical Glass StackTemplate](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)

## Visão geral

- Hana
- 16 min
- Principiante

## A seguir

[Explora as projeções 3D e os efeitos de ruído8 minPrincipiante](https://spline.design/pt-pt/academy/collections/hana-everything-you-need-to-know/explore-3d-projections-and-noise-effects)[Continuar](https://spline.design/pt-pt/academy/collections/hana-everything-you-need-to-know/explore-3d-projections-and-noise-effects)

[Spline](https://spline.design/pt-pt)

O editor 3D e 2D para equipas e os seus agentes. Publica na web, em iOS e em Android.

#### Pergunta à IA sobre o Spline

#### Produtos

- [Design 3D](https://spline.design/pt-pt/3d-design)
- [Hana](https://spline.design/pt-pt/hana)
- [Omma](https://omma.build)
- [Geração 3D com IA](https://spline.design/pt-pt/ai-generate)
- [Spline MCP](https://spline.design/pt-pt/mcp)
- [Spline Arena](https://spline.design/pt-pt/arena)
- [Preços](https://spline.design/pt-pt/pricing)
- [Empresas](https://spline.design/pt-pt/enterprise)

#### Runtimes

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

#### Apps

- [Transferir](https://spline.design/pt-pt/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Transferir o Spline Mirror](https://spline.design/download-mirror)

#### Aprender

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/pt-pt/academy)
- [API do Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Soluções](https://spline.design/solutions)

#### Comunidade

- [Comunidade Spline](https://community.spline.design)
- [Blog](https://spline.design/pt-pt/blog)
- [Novidades](https://spline.design/pt-pt/changelog)
- [Educação](https://spline.design/pt-pt/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/pt-pt/affiliate)

#### Empresa

- [Clientes](https://spline.design/pt-pt/customers)
- [Carreiras](https://www.ycombinator.com/companies/spline/jobs)
- [Segurança](https://spline.design/pt-pt/security)

#### Informação legal

- [Termos e condições](https://spline.design/terms)
- [Privacidade](https://spline.design/privacy)

#### Contacto

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

© 2026 - Spline, Inc.