# Desenha interações com Liquid Glass e transformações 3D no Hana - 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. [Tutoriais](https://spline.design/pt-pt/academy/tutorials)
3. Desenha interações com Liquid Glass e transformações 3D no Hana

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

HanaPrincipiante16 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

## Faz parte de

- [Hana | Tudo o que precisas de saber](https://spline.design/pt-pt/academy/collections/hana-everything-you-need-to-know/design-interactions-with-liquid-glass-3d-transforms-in-hana)

## Tutoriais relacionados

[Todos os tutoriais](https://spline.design/pt-pt/academy/tutorials)

[Cria materiais Liquid Glass em 3DSpline 3DPrincipiante12 min](https://spline.design/pt-pt/academy/tutorials/create-liquid-glass-materials-in-3d)[Cria ícones 3D com vetoresSpline 3DPrincipiante10 min](https://spline.design/pt-pt/academy/tutorials/build-3d-icons-with-vectors)[Criar texto 3D refrativo no HanaHanaPrincipiante7 min](https://spline.design/pt-pt/academy/tutorials/creating-refractive-3d-text-in-hana)

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