You can configure transform settings in the [Transform] tab on the right panel.
There are four types of transformations you can apply: Move, Rotate, Scale, and Skew. The reference point for all transformations is set using [Origin].
(1) Move
Moves a box along the X-axis or Y-axis.
By shifting an element's position, you can create effects like moving it on hover.
Example: Use the [Hover] conditional style to move an icon slightly upward when hovered.
(2) Rotate
Rotates a box.
By default, the box rotates around its center. You can change the [Origin] to rotate around a different point, such as the left edge or right edge.
(3) Scale
Scales a box up or down.
You can set the scale ratio independently for the X-axis and Y-axis.
Example: Use the [Hover] conditional style to scale an image up to 105% on hover for emphasis.
(4) Skew
Skews a box.
You can set the skew amount for the X-axis and Y-axis independently to create dynamic, angled designs.
(5) Origin
Choose the reference point for transformations from 9 available positions.
You can select from the center, four corners, or the midpoint of each edge (top, bottom, left, right) — giving you precise control over where moves, rotations, and other transformations originate.
Animations with transforms
Transform settings can be combined with the following features to create a wide variety of animation effects (for example, scaling up while rotating, or skewing while floating up from below).
Conditional styles: Set the conditions that trigger a transformation (e.g., on hover, on click).
Animations: Set the speed at which the transformation occurs.
Transform handles
Click [Transform Handle] in the upper-right corner of the transform settings area to display transform handles on the screen. Drag these handles to visually adjust transformations like rotation, scale, and skew directly on the box.
rotation handle rotate ratio angle stretch extend shrink elongate pull