How To Rotate Image In Webflow

Quick summary

Rotating an image in Webflow is done through the 2D & 3D transforms panel in the Style tab, where you can apply a Rotate transform and set precise degree values on any axis. This no-code approach lets designers control image orientation directly in the Webflow editor without writing any CSS manually.

Steps

1. Navigate to your project editor in Webflow.
2. Select the image you wish to rotate by simply clicking on it.
3. On the right sidebar menu, go to the Style tab.
4. Scroll down to 2D & 3D transforms and click the (+) button to add a transform property.
5. Under type, select Rotate.
6. You will now have the option to rotate your image in three axes in degrees.
7. Enter a value or use the slider to set the rotation — for example, a Z axis value of 90 rotates the image anti-clockwise to make it upright.
8. Your image is now successfully rotated in Webflow.