---
url: /docs/foundations/css-classes/rotate.md
---
> Transforms
# Rotate
Utilities for rotating elements with transform.
## Quick reference
| Class | Description |
|------------------------|-------------------------------------|
| `rotate-{deg}` | `transform: rotate({deg})` |
> Available values
> `{deg}`: Accepts any degree (120 rotates 120 degrees with the clock).
## Basic usage
### Rotating an element
Use the `rotate-{angle}` utilities to rotate an element.
```html
![]()
![]()
![]()
![]()
```
### Using negative values
To use a negative rotate value, prefix the class name with a dash to convert it to a negative value.
```html
![]()
```
### Removing transforms
To remove all transforms on an element at once, use the `transform-none` utility.
This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.
```html
```
### Hardware acceleration
If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the `transform-gpu` utility.
Use `transform-cpu` to force things back to the CPU if you need to undo this conditionally.
```html
```
## Applying conditionally
### Hover, focus, and other states
Warp lets you conditionally apply utility classes in different states using variant modifiers.
For example, use hover:rotate-45 to only apply the rotate-45 utility on hover.
```html
```
### Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more.
For example, use `md:rotate-45` to apply the `rotate-45` utility at only medium screen sizes and above.
```html
```