zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bbb2f415919600e56058a47e96bb92185fd5b8e8
zhaoguiyang.site/.agents/skills/tailwindcss/references/transform-translate.md
zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding 
- 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.
2026-03-13 13:18:03 +08:00

2.0 KiB
Raw Blame History

name, description
name description
transform-translate 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:

<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:

<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:

<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):

<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:

<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