You can configure transforms in the [Transform] tab of the right panel.
There are four types of transforms you can apply: Move, Rotate, Scale, and Skew. The reference point for each transform is set using the [Origin] option.
(1) Move
Moves the box along the X-axis or Y-axis.
By shifting the position, you can create effects like moving an element when it's hovered over.
Example: Use a [Hover] conditional style to move an icon slightly upward on hover.
(2) Rotate
Rotates the 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 the box up or down.
You can set the scale ratio independently for the X-axis and Y-axis.
Example: Use a [Hover] conditional style to scale an image to 105% on hover for emphasis.
(4) Skew
Skews the box.
You can set the skew amount for the X-axis and Y-axis independently, adding a sense of motion to your design.
(5) Origin
Choose the reference point for your transform from 9 available positions.
You can select from the center, the four corners, or the midpoints of each edge (top, bottom, left, right), giving you precise control over the pivot point for moves, rotations, and other transforms.
Animations with Transforms
Transform settings can be combined with the following features to create a wide variety of animations (for example, scaling up while rotating, or skewing while floating up from below).
Conditional styles: Set the conditions that trigger a transform (e.g., on hover, on click).
Animation: Set the speed at which the transform occurs.
Transform Handles
Click the [Transform Handle] button in the upper-right corner of the transform settings area to display transform handles on the screen. Drag these handles to visually adjust rotation, scale, skew, and other transforms on the box.
rotation handle rotate ratio angle stretch extend shrink elongate pull