Transform Tool Test
Unified Transform
One handle set for move, scale, shear, rotate and perspective — a small vanilla-JS recreation of GIMP's Unified Transform tool.
- Drag inside — move (Shift snaps 45°)
- Corner square — proportional scale
- Corner square + Shift — free scale, Ctrl — from pivot
- Corner diamond — perspective (Shift = along the diagonal)
- Edge circle — scale that side
- Edge circle + Shift — uniform, Ctrl — symmetric
- Edge diamond — shear (Ctrl = symmetric)
- Outer handle — rotate (Shift snaps 15°)
- Pivot dot — move the center (snaps to corners)
- Double-click — reset
Panel 01
drag, distort, rotate me
Real DOM, real text
Because the transform lands on an actual element via CSS matrix3d, live text stays crisp and fully re-editable in markup.
matrix3d(…)