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. There are four kinds of transforms:

  1. Move
  2. Scale
  3. Rotate
  4. Skew

Applying transforms

Transforms can be applied on any element. To apply a transform go to the Transitions & Transforms section of the Style Panel. There you will find the plus icon 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 Panel (Shortcut: S)
  3. Click on States and select the Hover state
  4. Scroll down to the Transitions & Transforms section
  5. Click the plus icon to add a new transform
 

When adding transform on the hover state, be sure to go back to the default state and add a transition to smooth out the hover effect:

  1. Go to the Style Panel
  2. Click on States, and select the None state
  3. Select the None state
  4. Scroll down to the Transitions & Transforms section
  5. Add a transition and select transforms from the list of properties to transition
 

Move

With the move transform, you can adjust an element’s position along the horizontal (X) and vertical (Y) axis. Adjusting both of these will result in the element moving diagonally.

 

Move in 3D space

You can also use the move transform along the Z axis, but there will be no effect unless you set Children Perspective on the parent element.

 

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.

 

Scale in 3D space

Scaling an element with the X and Y values linked will look the same whether the parent has 3D perspective set or not. To make an element appear as if it’s moving closer to the screen, use the move transform along the z-axis with 3D perspective enabled on the parent.

Scaling along the z-axis is another option, but it doesn’t change the appearance unless children of this element have varying move transforms enabled. Learn how to take advantage of scaling along the z-axis.

Scaling along the Z-axis

Scaling along the Z-axis can create a very powerful 3D effect that works on parent elements that have Children with varying z values.

As an example, we added three buttons inside a div block, which is nested inside of a section. To showcase this effect further, we have given the div block a 20º rotation along the X-axis. We used the following steps to create this 3D effect:

Select the section that holds the div blockSet a Children perspective of 800px

 

Select the buttonsGive the three buttons separate combo classesAdd a 20px move transform along the Z-axis to the first buttonAdd a 40px move transform along the Z-axis to the second buttonAdd a 60px move transform along the Zaxis to the third button

 

Once the move transforms are set up, you can then add the scale transform with these steps:

Select the div block holding the buttonsAdd a scale transform along the Z-axis

 

Scale on the Z-axis, in essence, will multiply the z values set on the children.  

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.

 

Skew

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

 

Applying 3D perspective on the parent has no effect on skew transforms.

Transform settings

Transform settings allow you to control the high-level options that affect all transforms applied to the element. That includes the transform origin, self perspective and backface visibility settings.  

Transform origin

The transform origin determines the origin, or anchor point, from where the transformation happens By default the origin is set in the center, meaning all transforms will take place from the center of the element. Adjusting the origin to the bottom right, for example, will make scale transforms start scaling from that location. This only applies to scale and rotate.

 

Self Perspective

To create enable a 3D effect on the element you can set a self perspective.. The 3D effect is relative to itself, unlike children perspective, which is set on the parent element and applies a 3D effect on all of its children elements.

Below you can see the bottom preview which uses self perspective and the top preview which has children perspective.

 

Backface visibility

By default when an element is rotated 180° along the X or Y-axis, it looks reversed, as if looking at it from behind. To hide this backface part of the element, simply make the backface invisible in the settings.

 

This is useful when creating rotating cards that reveal content on the back side.