# Thiết kế tương tác với Liquid Glass và biến đổi 3D trong Hana - Spline Academy (https://spline.design/vi/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana)

> Xin chào! 👋

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Thiết kế tương tác với Liquid Glass và biến đổi 3D trong Hana

# Thiết kế tương tác với Liquid Glass và biến đổi 3D trong Hana

HanaCơ bản16 phút

Xin chào! 👋

Trong hướng dẫn này, bạn sẽ học cách dùng các hiệu ứng liquid glass mới nhất trong Spline Hana để tạo vi tương tác (micro interaction) cho UI. Chúng ta cũng sẽ tìm hiểu cách tận dụng các công cụ chiếu 3D để tạo ra những thiết kế ấn tượng với phối cảnh 3D.

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=0s)
2. [0:34Dựng nút gạt Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=34s)
3. [2:28Thêm hiệu ứng Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=148s)
4. [5:00Tạo tương tác](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=300s)
5. [6:33Thêm về các bản cập nhật của Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=393s)
6. [7:10Dựng các lớp kính xếp chồng](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=430s)
7. [10:00Cách xuất thiết kế Hana](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=600s)
8. [10:12Thử nghiệm với hình dạng tùy chỉnh](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=612s)
9. [10:32Tạo hiệu ứng kính lúp bằng Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=632s)
10. [10:51Khám phá phép chiếu 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=651s)
11. [11:13Dựng cổng không gian 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=673s)
12. [12:16Cách tạo carousel 3D](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=736s)
13. [13:33Mẹo bổ sung](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=813s)
14. [13:38Auto Layout](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=818s)
15. [15:15Kết thúc](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=915s)

## Tài nguyên liên quan

- [Vertical Glass StackMẫu](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 TransformTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%A7%8A-3d-transform)
- [Effects in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana#liquid-glass)

## Tổng quan

- Hana
- 16 phút
- Cơ bản

## Thuộc

- [Hana | Mọi điều bạn cần biết](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/design-interactions-with-liquid-glass-3d-transforms-in-hana)

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Tạo vật liệu Liquid Glass trong 3DSpline 3DCơ bản12 phút](https://spline.design/vi/academy/tutorials/create-liquid-glass-materials-in-3d)[Dựng icon 3D bằng vectorSpline 3DCơ bản10 phút](https://spline.design/vi/academy/tutorials/build-3d-icons-with-vectors)[Tạo chữ 3D khúc xạ trong HanaHanaCơ bản7 phút](https://spline.design/vi/academy/tutorials/creating-refractive-3d-text-in-hana)

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

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.