---
title: Rotate
---

import IMExample from '@components/IMExample.astro';
import { Badge } from '@astrojs/starlight/components';

Allows you to rotate an element.

## Usage

```ts
new rotate(rotateOptions)
```

## Basic implementation

```ts
const circle = new rotate({ element: '.circle1' });
```

<IMExample path="/im-demo/demo/Rotate/rotate.html"/>

## rotateOptions

```ts
interface RotateOptions {
    element: string;
    snapAngle?: number;
    onRotation?: (angle: number) => void;
}
```

### element

Type:

```ts
type element = string
```

The element selector.

### snapAngle

Type:

```ts
type snapAngle = number
```

`default: 1`

The angle that the rotation snaps to.

### onRotation

Type:

```ts
type onRotation = (angle: number) => void;
```

Executes when the element rotates.

## Properties

### actionName <Badge text="readonly" size="medium" variant="note" />

Type:

```ts
type actionName = string
```

The name of the action that can be used to programmatically rotate the element.

### touchEnabled

Type:

```ts
type touchEnabled = boolean
```

Enables or disables touch events. Default is `false`.

## Methods

### deinit()

Removes the event listeners and disables the rotate functionality.

## Actions

You are able to rotate elements using actions. Since every rotate action is unique you can do the following:

```ts
const element = new rotate({ element: '.circle1' });

actions.execute(element.actionName, 90);
```