The Transform Panel

Move, scale, rotate, skew, and flip elements on the page.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

The Transform Panel contains a number of sliders that let you manipulate the size, orientation, and placement of elements. 

Transforms can be useful for adding interesting hover states, especially when combined with easing curves that you add via the Transitions Panel. Transforms are also very helpful for creating dynamic animations in combination with the Interactions Panel. 

To use the Transform Panel, click the icon in the right toolbar, or select it from the "Window" menu.

Note that if you apply a transform to an element, the transform will also apply to any elements contained within it. So for example, if you place a text element inside an container element and skew the container, the text will also be skewed. But you can skew the text in the opposite direction in order to correct the transform.

Translate X / Translate Y

Translate is a way to change an element's position on the page, vertically or horizontally.  

Use the slider to adjust the position on the X/Y axis, or use the input field. Values may be expressed as pixels, or as a percentage value on a scale from -100% (left/down) to zero (center) to 100% (right/up).

Scale

Scaling is a linear transformation that enlarges or shrinks elements, by the same amount on both axes. Use this transform if you want to increase or decrease an element while maintaining its aspect ratio. 

Use the slider to adjust the size of the element, or use the input field. The value must be entered as a number that represents the factor by which the element is scaled. So, a value of "1" would leave the element unchanged; a value of "2" would double its size, and so on. Entering a value of "0" will make the element disappear entirely.

Scale X / Scale Y

These transforms work the same way as the scale transform, but will affect the element only on the X axis (scale horizontally) or the Y axis (scale vertically.) 

Skew X / Skew Y

The skew transform tilts an element to the left or right. The effect is similar to turning a square into a parallelogram. 

Use the slider to adjust the skew of the element, or use the input field. The value must be expressed as the number of degrees of tilt. A value of 0 means no skew (the element will be unchanged.)

Rotate

This rotates the element clockwise or counter-clockwise from its current position. 

Use the slider to adjust the rotation, or use the input field. Values are expressed as degrees of a circle from -360 degrees (counter-clockwise full rotation) to 360 degrees (clockwise full rotation). A value of 0 means no rotation (the element will be unchanged.)

Flip X / Flip Y

This flips the element along the x (horizontal) or y (vertical) axis.

Use the slider to adjust the amount of flip, or use the input field. Values are expressed as degrees of rotation, from -180 degrees to 180 degrees, representing a full flip along the selected axis in either direction. A value of 0 means no rotation at all (the element will be unchanged.)

Did this answer your question?