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

> Olá! 👋

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

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

Aula 3 de 15HanaIniciante16 min

Olá! 👋

Neste tutorial, você vai aprender a usar os novos efeitos de liquid glass do Spline Hana para criar microinterações de interface. Também vamos ver como usar as ferramentas de projeção 3D para criar designs incríveis com perspectiva 3D.

## O que você vai aprender

1. [0:00Introdução](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=0s)
2. [0:34Criando um toggle de Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=34s)
3. [2:28Adicionando o efeito Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=148s)
4. [5:00Criando 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:10Criando vidros empilháveis](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=430s)
7. [10:00Como exportar seu design do Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=600s)
8. [10:12Experimentando com formas personalizadas](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=612s)
9. [10:32Criando um efeito de lupa com Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=632s)
10. [10:51Explorando projeções 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=651s)
11. [11:13Criando 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
- Iniciante

## A seguir

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

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

O editor 3D e 2D para equipes e seus agentes. Publique na web, no iOS e no Android.

#### Pergunte à IA sobre o Spline

#### Produtos

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

#### Runtimes

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

#### Apps

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

#### Aprenda

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

#### Comunidade

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

#### Empresa

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

#### Jurídico

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

#### Contato

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

© 2026 - Spline, Inc.