The transform properties
| Property | Type | Default | Description |
|---|---|---|---|
| x | number | 0 | Horizontal translation in pixels. Positive moves right, negative moves left. |
| y | number | 0 | Vertical translation in pixels. Positive moves up, negative moves down. (Inverted from CSS, see below.) |
| scale | number | 1 | Uniform scale on both axes. 0.5 is half size, 2 is double, 1 is natural. |
| scaleX | number | 1 | Scale on the X axis only. Combine with scaleY for non-uniform stretching. |
| scaleY | number | 1 | Scale on the Y axis only. |
| rotate | number | 0 | Rotation in degrees. Positive is clockwise. Multiples of 360 represent full turns (rotate to 720 for two complete spins). |
| skewX | number | 0 | Horizontal skew in degrees. |
| skewY | number | 0 | Vertical skew in degrees. |
The inverted Y axis
CSS uses a Y axis where positive values move down (top of the page is 0, scrolling down increases Y). Glopzi inverts this in the editor: positive Y moves up, negative Y moves down.
The reason is intuitive design:
- “Translate up by 30 pixels” reads as y = 30. Natural.
- “Translate down by 30 pixels” reads as y = -30. Also natural.
The inversion is presentation-only. The compiled output uses standard CSS conventions, so animations behave correctly in the browser. You only see (and edit) the intuitive values.
Note
X is not inverted. Positive X moves right, matching both natural language and CSS.
Units
Translate values are pixels by default. Scale is a unitless multiplier. Rotate and skew are degrees.
For viewport-relative motion (a slide-up that scales with screen size), use breakpoint overrides to set different pixel values per device. Glopzi doesn’t support unit suffixes like vh or % in transform fields directly.
Performance
Transform properties are the cheapest properties to animate. They run on the compositor thread, off the main thread, accelerated by the GPU.
- Translate, scale, rotate, skew all free of layout cost. Use these whenever you can.
- Browsers optimize transform animations even at high frame rates. Hundreds of elements animating transforms at 60fps is realistic.
- Transforms compose: animating x, y, scale, and rotate together is one composite operation per frame, not four separate ones.
See Performance and Core Web Vitals for the full discussion of what’s cheap and what’s expensive.
Next steps
- 3D transforms: rotateX, rotateY, perspective extends the transform stack to depth.
- Visual: opacity, blur, brightness, contrast, saturate, grayscale covers filter properties.
- Easing shapes the curve between transform values.