Transforms can be applied on any element. To apply a transform go to the Extra section of the Style Manager. There you will find the plus icon under the transform section to add a transform.
Keep in mind that switching between transforms types will cause the first transform to be lost. You will need to add an additional transform (using the plus icon) if you want to add more than one type.
Transforms affect the appearance of the element relative to itself, so using percentage (%) units will not affect the element relative to the parent, like it does for other properties like width, height, and position.
It’s common to set transform styles on the hover state so that elements will move, scale, or rotate when users interact with it.
You can add a transform on the hover with the following steps:
Select an element
Go to the Style Manager
Click on State Dropdown and select the Hover state
Scroll down to the Extra Section section
Under the Transform, click the plus icon to add a new transform
The perspective property is used to give a 3D-positioned element some perspective.
The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.
A scale transform will cause an element to appear larger if the value is higher than 1 or smaller if it’s between 0 and 1. By default both the X and Y values are linked so that the element is scaled proportionately, but it can be unlinked to edit each value independently.
You can apply a rotate transform along the X, Y, and Z axis.To rotate an element clockwise or counter-clockwise, you’ll need to rotate along the Z-axis. The X and Y-axis rotations appear flattened by default because 3D perspective is not enabled on the parent element.
To make the X and Y-axis rotations look 3D, enable 3D perspective on the parent element.
Skew transforms sheer the element along the X or Y-axis.