Transforms



Transforms are used to change the appearance and position of an element without affecting nearby elements. Transform effects can be set to different states of an element (for example, on hover), making the website more interactive. 

You can use one of four types of transforms: 

You can add Transforms on the Styles tab in the right panel in the Effects section. To add Transforms, click on “+” to the right of Transforms.

By default, the Rotate transform will be added. You can change the type of transform by clicking on its name.

You can also change the type of transform directly in its settings. You can click on the icon to the left of the name of the transform and then select the tab with the desired type. 

An element may have more than one type of transform. For adding a transform, click on "+".



Move 

With the Move transform, you can reposition an element left and right on the horizontal (X) axis, or up and down on the vertical (Y) axis, using positive and negative values. A move along both axes moves the element diagonally.

Moving an element along the Z axis changes its perceived depth. However, there will be no effect if you do not set the child perspective for the parent element (in the Transforms settings).

A move is set on pixels (px). You can change the unit by selecting it from the drop-down list (px, %, em, vw, vh).

Scale

The Scale transform causes an element to become larger if the value is greater than 1, or smaller if it is between 0 and 1. You can link both X and Y values so that an element is scaled proportionally. To edit each value independently, you must disable the link between the X and Y values by clicking the lock icon.

Rotate

To rotate an element along the X and Y axes, set a positive or negative value in degrees (deg). Degrees is the default unit. You can change by selecting another unit from the drop down list.

For 3D effect, you must set the perspective value of the child elements on the parent element. To rotate an element clockwise or counter clockwise, you need to rotate it along the Z axis.

Skew

With the Skew transform, you can setup the skew of an element along the X and Y axes. Applying the perspective to the parent element does not affect the Skew transform. 



By clicking on three dots to the right of the Transform effect, you can access the Transforms settings.

The Transform settings affect all transforms applied to an element. 

Origin 

The transform origin determines the start or anchor point from which the transform originates. By default, the origin is set to the center, which means that all transforms will occur from the center of an element. You can set the origin by clicking on one of the points in the origin control.

You can also manually adjust the positioning by entering values for the horizontal and vertical positions. By default, percentage (%) is used. The unit can be changed to vw and vh.

For example, if you move the origin to the lower right corner, transform will start from that point. This option only affects the Scale and Rotate transforms.

Backface 

Backface allows you to set the visibility of the back side of an element. By default, when you rotate an element 180° along the X or Y axis, it looks upside down as if you are looking at it from behind. Any text inside an element will appear upside down, as if mirrored. You can select the Visible or Hidden properties for the backface.

This option can be used when creating rotating cards with content displayed on the back.

Children perspective

Setting the child elements’ perspective to the parent element creates a realistic 3D effect. These 3D settings will be applied to the transforms set on the child elements.

The perspective is set with the Distance option, which determines the intensity of the 3D effect. By default, the Distance is set to none. It can be set in pixels px, em, vw, vh. Most often, it is enough to enter a distance value in the range from 400 to 1000 pixels.



When creating transforms for different element states, it is recommended to add Transitions to make the interaction smooth. For example, by adding a hover-state transform to an element, you get a sharp toggle effect on hover. Add a Transition effect so that the transform works out smoothly. This can be done in the Effects section by clicking “+” next to the Transitions option.