# Animera interaktiva 3D-lådor - Animation och interaktioner i Spline - Spline Academy (https://spline.design/sv/academy/tutorials/animate-interactive-3d-boxes)

> Hej! I den här tutorialen har vi kul och lär oss att snabbt bygga en interaktion där flera kuber lekfullt flyttar sig och byter färg när du för muspekaren…

1. [Academy](https://spline.design/sv/academy)
2. [Kurser](https://spline.design/sv/academy/collections)
3. [Animation och interaktioner i Spline](https://spline.design/sv/academy/collections/animation-interactions-in-spline)
4. Animera interaktiva 3D-lådor

# Animera interaktiva 3D-lådor

Lektion 5 av 14Spline 3DMedelnivå4 min

Hej! I den här tutorialen har vi kul och lär oss att snabbt bygga en interaktion där flera kuber lekfullt flyttar sig och byter färg när du för muspekaren över dem.

Och det tar oss mindre än 5 minuter! 👀 Kolla in Spline: <https://spline.design/>

Remixa 👉 <https://app.spline.design/file/8f4650a0-c475-415a-a6d5-c914d47c16bd>

Dela din version i vår community på <https://community.spline.design/> Vi längtar efter att se den 🤩

Lycka till med lärandet!

## Det här lär du dig

1. [0:00Introduktion](https://www.youtube.com/watch?v=RmC2xEtXobE&t=0s)
2. [0:12Skapa en kub](https://www.youtube.com/watch?v=RmC2xEtXobE&t=12s)
3. [0:31Lägga till färger och material](https://www.youtube.com/watch?v=RmC2xEtXobE&t=31s)
4. [1:29Lägga till djup](https://www.youtube.com/watch?v=RmC2xEtXobE&t=89s)
5. [1:56Skapa en Mouse Hover-interaktion](https://www.youtube.com/watch?v=RmC2xEtXobE&t=116s)
6. [2:39Duplicera kuben](https://www.youtube.com/watch?v=RmC2xEtXobE&t=159s)
7. [4:00Exportalternativ och inspiration från communityn](https://www.youtube.com/watch?v=RmC2xEtXobE&t=240s)

## Relaterade resurser

- [Interactive Cubes ExperienceMall](https://app.spline.design/academy/tutorials/animate-interactive-3d-boxes?redirect-duplicate-template-uuid=3274b34e-60fa-4a92-bb4a-2fb5383f3021&is-2d-file=false)
- [Mouse Hover EventDokument](https://docs.spline.design/interaction-states-events-and-actions/events/mouse-hover-event)
- [Cloner MotionDokument](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [ComponentsDokument](https://docs.spline.design/designing-in-3-d/components)
- [Transition ActionDokument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Översikt

- Spline 3D
- 4 min
- Medelnivå

## Nästa

[Så skapar du en snurrande 3D-ikon15 minNybörjare](https://spline.design/sv/academy/collections/animation-interactions-in-spline/how-to-create-a-spinning-3d-icon)[Fortsätt](https://spline.design/sv/academy/collections/animation-interactions-in-spline/how-to-create-a-spinning-3d-icon)

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

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

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

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.