# Reka Bentuk Interaksi dengan Liquid Glass & 3D Transforms dalam Hana - Spline Academy (https://spline.design/ms/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana)

> Helo! 👋

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Reka Bentuk Interaksi dengan Liquid Glass & 3D Transforms dalam Hana

# Reka Bentuk Interaksi dengan Liquid Glass & 3D Transforms dalam Hana

HanaPemula16 min

Helo! 👋

Dalam tutorial ini, anda akan belajar cara menggunakan kesan liquid glass terkini dalam Spline Hana untuk mencipta interaksi mikro UI. Kami juga akan membincangkan cara menggunakan alat unjuran 3D untuk mencipta reka bentuk menakjubkan yang memanfaatkan perspektif 3D.

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=0s)
2. [0:34Membina suis Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=34s)
3. [2:28Menambah kesan Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=148s)
4. [5:00Mencipta interaksi](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=300s)
5. [6:33Lagi tentang kemas kini Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=393s)
6. [7:10Membina kaca bertindan](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=430s)
7. [10:00Cara mengeksport reka bentuk Hana anda](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=600s)
8. [10:12Bereksperimen dengan bentuk tersuai](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=612s)
9. [10:32Mencipta kesan kanta pembesar menggunakan Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=632s)
10. [10:51Meneroka unjuran 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=651s)
11. [11:13Membina portal 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=673s)
12. [12:16Cara mencipta Karusel 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=736s)
13. [13:33Petua Bonus](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=813s)
14. [13:38Auto Layout](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=818s)
15. [15:15Penutup](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=915s)

## Sumber berkaitan

- [Vertical Glass StackTemplat](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 TransformDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%A7%8A-3d-transform)
- [Effects in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana#liquid-glass)

## Gambaran keseluruhan

- Hana
- 16 min
- Pemula

## Sebahagian daripada

- [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/design-interactions-with-liquid-glass-3d-transforms-in-hana)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Cipta Bahan Liquid Glass dalam 3DSpline 3DPemula12 min](https://spline.design/ms/academy/tutorials/create-liquid-glass-materials-in-3d)[Bina Ikon 3D dengan VektorSpline 3DPemula10 min](https://spline.design/ms/academy/tutorials/build-3d-icons-with-vectors)[Mencipta Teks 3D Membias dalam HanaHanaPemula7 min](https://spline.design/ms/academy/tutorials/creating-refractive-3d-text-in-hana)

[Spline](https://spline.design/ms)

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ms/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Penyelesaian](https://spline.design/solutions)

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

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

© 2026 - Spline, Inc.