# Animera interaktiva 3D-lådor - 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. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Animera interaktiva 3D-lådor

# Animera interaktiva 3D-lådor

Spline 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å

## Del av

- [Animation och interaktioner i Spline](https://spline.design/sv/academy/collections/animation-interactions-in-spline/animate-interactive-3d-boxes)

## Relaterade tutorials

[Alla tutorials](https://spline.design/sv/academy/tutorials)

[Väck en interaktiv 3D-robot till livSpline 3DNybörjare13 min](https://spline.design/sv/academy/tutorials/bring-an-interactive-3d-robot-to-life)[Exportera interaktiva upplevelser native för iOS och visionOSSpline 3DMedelnivå15 min](https://spline.design/sv/academy/tutorials/export-interactive-experiences-natively-for-ios-and-visionos)[Så exporterar du native 3D för AndroidSpline 3DMedelnivå12 min](https://spline.design/sv/academy/tutorials/how-to-export-native-3d-for-android)

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