Transforms change the position, size, rotation, or skew of an element. All transforms are applied relative to the element's anchor point (also called the transform origin).

The Transform Origin (Anchor Point)

The anchor point is the pivot for all rotation and scale operations. By default it is at the geometric center of the element.

Moving the Anchor Point

•In the Properties Panel, the anchor point is represented by a 3×3 grid of nine possible positions. Click any position to snap the anchor there.
•For custom positions: enable "Custom Anchor" in the Properties Panel and enter X/Y offsets from the element's center
•In Path Edit mode, the anchor point appears as a crosshair and can be dragged to any position, including outside the element's bounds

Animation Note: Changing the anchor point after animation has been set will affect how rotation and scale animations behave. Always set the anchor point before keyframing rotational or scale animation.

Position

Position is the X/Y coordinate of the element's anchor point relative to the canvas origin (top-left = 0,0).

•X — horizontal position (positive = right)
•Y — vertical position (positive = down, following screen coordinate convention)

Input Methods

•Numeric Input: Click the X or Y field in the Properties Panel and type a value. Press Tab to move to the next field; press Enter to confirm.
•Relative Input: Prefix a value with + or - to enter a relative change. Example: typing +50 in the X field moves the element 50px to the right.
•Nudging: Arrow keys move selected element(s) by 1px. Shift+Arrow moves by 10px.

Dimensions (Width & Height)

•Free Resize: Drag any of the eight resize handles at the corners and edges of the selection bounding box.
•Proportional Resize: Hold Shift while dragging a corner handle to maintain the aspect ratio.
•Resize from Center: Hold Alt while dragging a handle to resize symmetrically from the anchor point.
•Numeric Input: Enter exact values in the W (width) and H (height) fields in the Properties Panel.
•Aspect Ratio Lock: The chain-link icon between W and H locks proportional scaling when numeric values are entered.

Rotation

Rotation is applied around the element's anchor point in degrees.

•Free Rotation: Hover outside the selection bounding box until the rotation cursor appears, then click and drag.
•Constrained Rotation: Hold Shift while rotating to snap to 15° increments.
•Numeric Input: Positive values rotate clockwise; negative values rotate counter-clockwise. Values above 360° or below -360° are accepted (relevant for multi-rotation animations).

Scale

Scale transforms the element proportionally or non-proportionally.

•Scale X / Scale Y: Independent horizontal and vertical scale values, expressed as percentages (100% = original size).
•Non-Uniform Scale: Changing X and Y scale independently stretches or compresses the element along one axis — useful for squash-and-stretch animation effects.

Negative Scale (Flip)

•Scale X = -100% mirrors the element horizontally
•Scale Y = -100% mirrors the element vertically

This is equivalent to the Flip Horizontal / Flip Vertical commands.

Skew

Skew applies a shear transformation along the X or Y axis, creating a parallelogram-like distortion.

•Skew X — shears horizontally. Positive values lean the element to the right at the top.
•Skew Y — shears vertically. Positive values lean the element downward on the left side.

Skew is expressed in degrees. Range: -85° to 85°.

Opacity

The element-level opacity setting controls the overall transparency of the entire element — all fill layers, stroke, and shadow composited together — before the element is blended with the layers below.

Range: 0% (completely transparent) to 100% (fully opaque).

Important Distinction

Element opacity is distinct from fill layer opacity (which controls only that fill layer) and from blend mode (which controls how the element interacts with what is beneath it).

Transform Operations