bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
78 lines
2.0 KiB
Markdown
78 lines
2.0 KiB
Markdown
---
|
|
name: transform-translate
|
|
description: Translating elements on x, y, and z axes with spacing scale, percentages, and custom values
|
|
---
|
|
|
|
# Translate
|
|
|
|
Utilities for translating (moving) elements.
|
|
|
|
## Usage
|
|
|
|
### Spacing scale
|
|
|
|
Use `translate-<number>` to translate on both axes, or `translate-x-<number>` / `translate-y-<number>` for single axis:
|
|
|
|
```html
|
|
<div class="translate-2">Moved 2 units</div>
|
|
<div class="-translate-4">Moved -4 units</div>
|
|
<div class="translate-x-4">Moved right 4 units</div>
|
|
<div class="translate-y-6">Moved down 6 units</div>
|
|
```
|
|
|
|
### Percentage translation
|
|
|
|
Use `translate-<fraction>` to translate by percentage of element size:
|
|
|
|
```html
|
|
<div class="translate-1/2">Moved 50% on both axes</div>
|
|
<div class="translate-x-1/4">Moved 25% right</div>
|
|
<div class="-translate-y-full">Moved 100% up</div>
|
|
```
|
|
|
|
### Centering elements
|
|
|
|
Common pattern for centering absolutely positioned elements:
|
|
|
|
```html
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
Centered
|
|
</div>
|
|
```
|
|
|
|
### Z-axis translation
|
|
|
|
Use `translate-z-<number>` for 3D translation (requires `transform-3d` on parent):
|
|
|
|
```html
|
|
<div class="transform-3d">
|
|
<div class="translate-z-4">Forward in 3D space</div>
|
|
<div class="-translate-z-8">Backward in 3D space</div>
|
|
</div>
|
|
```
|
|
|
|
### Custom values
|
|
|
|
Use arbitrary values for custom translations:
|
|
|
|
```html
|
|
<div class="translate-[3.142rad]">Custom translation</div>
|
|
<div class="translate-x-[117px]">Custom pixel value</div>
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- `translate-*` moves on both x and y axes
|
|
- `translate-x-*` moves horizontally (right = positive)
|
|
- `translate-y-*` moves vertically (down = positive)
|
|
- `translate-z-*` moves in 3D space (forward = positive)
|
|
- Negative values use dash prefix: `-translate-4`, `-translate-x-8`
|
|
- Percentages are relative to element's own size
|
|
- Common centering: `top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`
|
|
- Z-axis requires `transform-3d` utility on parent element
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/translate
|
|
-->
|