Please note, this is a STATIC archive of website help.webflow.com from December 2024, cach3.com does not collect or store any user information, there is no "phishing" involved.

How to use transforms

Updated 
May 27, 2016

From the Style tab in the Right Side Panel, scroll down to the Transitions & Transforms module and click the Add Transform button.

NOTE: In order to see some transforms set along the Z axis (3D Transform), you must first apply a perspective setting to it's parent element. How to set an element's perspective settings.

Move X

Move an element left or right.

Move Y

Move an element up or down.

Move Z (3D)

Move an element forward or backward.

NOTE: You must apply a perspective setting to the element's parent in order to visibly see a move transform set along the z-axis.

Scale X

Resize an element horizontally.

Scale Y

Resize an element vertically.

Scale Z (3D)

Resize the z-axis you move elements on. 

‍This example shows an element that has been moved forward 50px. A Scale-Z of 0.5 will appear to move the element backward 25px (or half the distance moved along the z-axis)

Rotate X (3D)

Rotate an element along its horizontal axis.

Rotate Y (3D)

Rotate an element along its vertical axis.

Rotate Z

Rotate an element along its z-axis.

Skew X

Skew an element's angle horizontally.

Skew Y

Skew an element's angle vertically.