# Rotate

Rotate transforms can be used to spin elements in and out with a rotation animation.

> [!NOTE]
> You also need to apply [`animate-in`][Animate_in] or [`animate-out`][Animate_out] classes respectively.

## `spin-in-*`

<table>
<thead>
<tr>
<th>Class</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr>
<td>

`spin-in`

</td>
<td>

```css
--tw-enter-rotate: 30deg;
```

</td>
</tr>
<tr>
<td>

`spin-in-<number>`

</td>
<td>

```css
--tw-enter-rotate: <number>deg;
```

</td>
</tr>
<tr>
<td>

`spin-in-(<custom-property>)`

</td>
<td>

```css
--tw-enter-rotate: var(<custom-property>);
```

</td>
</tr>
<tr>
<td>

`spin-in-[<value>]`

</td>
<td>

```css
--tw-enter-rotate: <value>;
```

</td>
</tr>
</tbody>
</table>

## `spin-out-*`

<table>
<thead>
<tr>
<th>Class</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr>
<td>

`spin-out`

</td>
<td>

```css
--tw-exit-rotate: 30deg;
```

</td>
</tr>
<tr>
<td>

`spin-out-<number>`

</td>
<td>

```css
--tw-exit-rotate: <number>deg;
```

</td>
</tr>
<tr>
<td>

`spin-out-(<custom-property>)`

</td>
<td>

```css
--tw-exit-rotate: var(<custom-property>);
```

</td>
</tr>
<tr>
<td>

`spin-out-[<value>]`

</td>
<td>

```css
--tw-exit-rotate: <value>;
```

</td>
</tr>
</tbody>
</table>

<!-- Links -->

[Animate_in]: ../animations/in-out.md#animate-in
[Animate_out]: ../animations/in-out.md#animate-out