Motion+

Rotate

An example of animation the rotation of an element with Motion for Vue

Vue
>Live exampleOpen

Source code

<script setup>
import { motion } from "motion-v"
</script>

<template>
    <motion.div
        class="box"
        :animate="{ rotate: 360 }"
        :transition="{ duration: 1 }"
    />
</template>

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: var(--hue-5);
    border-radius: 5px;
}
</style>

Related examples

Latest in Vue

Motion+

Unlock all 400+ examples

  • Source code for every Plus example.
  • Provide examples direct to your agent via Motion's MCP.
  • Lifetime access to new examples and APIs.