# Transform Origin

Set the origin point for transformations.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 36 · Edge 12 · Firefox 16 · Safari 9

| Class | Properties | Value |
|-------|------------|-------|
| `tor:b` | transform-origin | `bottom` |
| `tor:bl` | transform-origin | `0 100%` |
| `tor:br` | transform-origin | `100% 100%` |
| `tor:c` | transform-origin | `center` |
| `tor:l` | transform-origin | `0` |
| `tor:r` | transform-origin | `100%` |
| `tor:t` | transform-origin | `top` |
| `tor:tl` | transform-origin | `0 0` |
| `tor:tr` | transform-origin | `100% 0` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `tor:b` | transform-origin | `bottom` |
| `tor:bl` | transform-origin | `0 100%` |
| `tor:br` | transform-origin | `100% 100%` |
| `tor:c` | transform-origin | `center` |
| `tor:l` | transform-origin | `0` |
| `tor:r` | transform-origin | `100%` |
| `tor:t` | transform-origin | `top` |
| `tor:tl` | transform-origin | `0 0` |
| `tor:tr` | transform-origin | `100% 0` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `tor:b` | transform-origin | `bottom` |
| `tor:bl` | transform-origin | `0 100%` |
| `tor:br` | transform-origin | `100% 100%` |
| `tor:c` | transform-origin | `center` |
| `tor:l` | transform-origin | `0` |
| `tor:r` | transform-origin | `100%` |
| `tor:t` | transform-origin | `top` |
| `tor:tl` | transform-origin | `0 0` |
| `tor:tr` | transform-origin | `100% 0` |