2D & 3D Transforms

Just like relative position, transforms allow you to manipulate an element's appearance and position without changing the actual dimensions of the element or affecting the other elements around it.

Applying transforms

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.

Transforms on hover

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:

  1. Select an element

  2. Go to the Style Manager

  3. Click on State Dropdown and select the Hover state

  4. Scroll down to the Extra Section section

  5. Under the Transform, click the plus icon to add a new transform

Transforms

Perspective

Perspective

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.

Scale

Scale

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.

Rotate

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.

Rotate in 3D space

To make the X and Y-axis rotations look 3D, enable 3D perspective on the parent element.

Rotate in 3D Space

Skew

Skew transforms sheer the element along the X or Y-axis.

Skewing in 3D Space