2D & 3D Transforms

Transforms allow you to manipulate an element's appearance and position without affecting the other elements around it.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

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.

Before getting started with this guide, check out intro to 3D.

Adding transforms

You can add a transform or multiple transforms to an element in the transforms settings in the Style panel.

Types of transforms

There are four types of transforms:

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

Once you specify the type of the transform, you can set the values for one or more of the axes. If you switch between transform types while setting a transform, your first transform may be lost. To add more than one type of transform without losing any of your previous ones, add an additional transform using the plus icon.   

Translate

With the translate (or 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. You can also move the element along the Z axis, but there will be no effect unless you set children perspective on the parent element.

The default unit for the translate values is pixels (px). You can change the unit from the Unit menu.

Learn more about input values and units.

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, by clicking the lock icon, to edit each value independently.

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

 

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. 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 element has no effect on skew transforms.

Transforms settings

You can access the transforms settings by clicking on the ellipses icon.

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

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 scale transforms from that location. This only applies to scale and rotate. You can set the origin by clicking one of the dots in the origin control. You can also manually adjust the positioning by typing the values for the horizontal position (left) and the vertical position (top). You can also change the unit of the values between the px, % (default), vw, and vh.

Backface

By default when an element is rotated 180° along the X or Y-axis, it looks reversed, as if looking at it from behind. Any text content within the element will look reversed as if you’re holding it against a mirror. You can hide the backface part of an element in the element settings.

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

3D Perspectives

When a perspective is not set, all 3D-compatible transforms (e.g. rotate X, rotate Y, move Z, and scale Z) will either have a flat, two-dimensional appearance or no effect at all. Enabling 3D perspective will make it possible to translate, rotate, and scale elements in 3D space.

A perspective can be set on a parent element and affect all of its children, or just on the element itself. You can set a 3D perspective by defining the distance between the Z plane and the viewer.

The distance value determines how intense the effect is. For a more impressive effect, set a small value (less than 1000px). This brings the viewer closer to the Z plane. Higher values make the effect more subtle.

Self perspective

Setting a self perspective will make 3D transforms applied on an element appear in 3D. The effect isn’t as realistic as setting children perspective on the parent element. To set a self perspective, define a distance value in the transform settings.

Children perspective

Setting a children perspective creates a realistic-looking 3D effect. This setting is enabled on the parent element so that it creates a 3D perspective on all of its child elements.

Here, you’ll also set the distance and an origin for your transforms. These settings will apply on transform properties set on the children of this element.

Browser support

Can I Use transforms3d? Data on support for the transforms3d feature across the major browsers from caniuse.com.