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

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

HanaIniciante16 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

## Parte de

- [Hana | Tudo o que você precisa saber](https://spline.design/pt-br/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-br/academy/tutorials)

[Crie materiais de Liquid Glass em 3DSpline 3DIniciante12 min](https://spline.design/pt-br/academy/tutorials/create-liquid-glass-materials-in-3d)[Crie ícones 3D com vetoresSpline 3DIniciante10 min](https://spline.design/pt-br/academy/tutorials/build-3d-icons-with-vectors)[Criando texto 3D refrativo no HanaHanaIniciante7 min](https://spline.design/pt-br/academy/tutorials/creating-refractive-3d-text-in-hana)

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