---
title: Rotate
description: "`Rotate`は、２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rotate/rotate.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rotate
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-rotate--basic
---

```tsx
<Rotate
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

## 使い方

```tsx
import { Rotate } from "@yamada-ui/react"
```

```tsx
import { Rotate } from "@/components/ui"
```

```tsx
import { Rotate } from "@workspaces/ui"
```

```tsx
<Rotate />
```

### 角度を変更する

角度を変更する場合は、`rotate`に数値を設定します。デフォルトでは、`45`が設定されています。

```tsx
<Rotate
  rotate={-360}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### 所要時間を変更する

所要時間を変更する場合は、`duration`に数値(秒)を設定します。

```tsx
<Rotate
  duration={1.4}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### 遅延させる

遅延させる場合は、`delay`に数値(秒)を設定します。

```tsx
<Rotate
  delay={1}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### 無効にする

無効にする場合は、`disabled`を`true`にします。

```tsx
<Rotate
  disabled
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx
<Rotate
  readOnly
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### 制御する

```tsx
const [value, onChange] = useState<KeyframeIdent>("from")

return (
  <Rotate
    from={<AppleIcon fontSize="2xl" />}
    to={<CherryIcon fontSize="2xl" />}
    value={value}
    onChange={onChange}
  />
)
```

## Props

| Prop           | Default  | Type                                                                                                                      | Description                                                                  |
| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `as`           | -        | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                                                  |
| `asChild`      | -        | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                   |
| `css`          | -        | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                              |
| `colorScheme`  | -        | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                  |
| `defaultValue` | `"from"` | `KeyframeIdent`                                                                                                           | You can set the initial state.                                               |
| `delay`        | `0`      | `number`                                                                                                                  | 　The animation delay.                                                       |
| `disabled`     | `false`  | `boolean`                                                                                                                 | If `true`, the component is disabled.                                        |
| `duration`     | `0.4`    | `number`                                                                                                                  | The animation duration.                                                      |
| `from`         | -        | `ReactNode`                                                                                                               | Passing React elements to "from" is required.                                |
| `onChange`     | -        | `(value: KeyframeIdent) => void`                                                                                          | This is a callback function that is called when the animation state changes. |
| `readOnly`     | `false`  | `boolean`                                                                                                                 | If `true`, the component is readonly.                                        |
| `rotate`       | `45`     | `number`                                                                                                                  | The animation rotation.                                                      |
| `to`           | -        | `ReactNode`                                                                                                               | Passing React elements to "to" is required.                                  |
| `value`        | -        | `KeyframeIdent`                                                                                                           | Use this when you want to control the animation from outside the component.  |