Divi Transform Options are powerful tools that allow you to manipulate your web design in stunning ways, creating depth and compelling visual effects.
You can move elements around, scale them up or down, rotate on three different axis, skew elements, and adjust the transform origin all within the Visual Builder.
No more writing detailed custom code to add transform effects to your page elements. Now you can transform all Sections, Rows, and Modules directly in the Visual Builder while seeing those effects take action in real-time!
Combining these effects with Div's hover options allows you to create powerful interactive designs as your user scrolls through your website.
When applying Transform effects, it's important to note that this will not disrupt the elements around it.
That means you can move elements around, increase their size, and rotate them without affecting any surrounding elements.
This allows you to break free elements from their parent Columns, Rows, or Sections, allowing you to stack items on top of each other and create beautiful collages with different modules.
Where to Find Divi's Transform Options
The Transform options group can be found in any Divi element (Sections, Rows, Columns, or Modules).
Open the element's modal Settings window by clicking on the gear icon
Go to the Design tab
Expand the Transform options group
How to Use the Divi Transform Options
With Transform controls, you can easily adjust the appearance of any Section, Row, or Module within Divi.
The transform interface not only includes standard range sliders and input values for adjusting settings but presents the transformation visually so that it's easy to understand what's taking effect.
As you adjust the controls, you'll see the transformation taking effect right before your eyes on the page.
Transform Scale
Using the Scale control, you can quickly adjust the size of any element.
Drag the range sliders up or down to increase or decrease the element's size.
By default, the original aspect ratio will be kept. However, you can unsync the height and width settings and adjust them independently by clicking the chainlink icon 
in the bottom right corner.
Transform Translate
Using the Translate control, you can easily adjust the position of any element on the page.
Moving an element with the translate option allows you to move the element within the page without affecting any surrounding elements or its parent element.
This is similar to using absolute positioning in CSS, except the position is based on the element’s inline position instead of the position of its parent relative element.
Transform Rotate
Using the Rotate control, you can easily rotate any element on three different axes for a full range of three-dimensional rotation.
The first option allows you to tilt elements down right or up left
The second option allows you to tilt elements backward or forward
The third option allows you to tilt elements from left to right
Instead of rotating design elements in Photoshop, you can now create this effect within Divi, saving you tons of design time! And if you ever need to replace an image, you don't have to re-edit it in Photoshop but can easily replace it within Divi.
Transform Skew
You can easily slant an element in one direction or another using the Skew control.
This can be used to create compelling depth effects. Drag the range sliders to adjust the skew.
By default, the original aspect ratio of the element will be kept. However, you can unlink these values as you adjust them individually by clicking the chainlink icon
in the bottom right corner.
Much like the Scale control, you can skew elements with a locked aspect ratio or unlock each side and adjust them independently.
Combining Skew and Rotation can lead to some stunning 3d effects that add depth and complexity to your page.
Transform Origin
The Transform Origin option allows you to change the starting point of any transformation set using the transform options.
This is a convenient way to offset the position where a certain transform effect occurs.
Example: Use this option with the rotate option to pinpoint where the rotation occurs. All you need to do is position the point using the UI provided.
Best Practices & Tips For Using Divi Transform Options
Use Transform With Hover Options
To create truly interactive designs, you can combine transform and hover effects to design elements that transform on hover.
Pro Tip: If you want to move an element on hover using transform translate, you should also increase the size using transform scale to avoid any messy jumping when hovering over the element.
Add Perspective for 3D Effects
Perspective is a technique artists use to draw objects that appear to be 3D even though they exist on a 2D plane.
In web design, you can position elements in 3D positions using the transform property. In Divi, these transform options are built into the Divi builder.
The main transform property that puts an element in a 3D position is transform rotate, which allows you to rotate items along the z, x, or y-axis.
However, if you rotate an item using transform rotate, the element won’t appear as 3D unless the perspective property is applied.
Example: You have a single Image module with an image added to a one-column row. Then, can you use the transform rotate property to rotate the image along the x-axis.
The image will rotate but remain 2D, so it looks like it was squeezed from the top and bottom to become shorter.
If you add perspective using a small snippet of CSS to the Row’s main element (a parent element of the image), you add perspective to the image.
Depending on the perspective value, you can increase or decrease the distance the object appears from the user looking at the screen.
Here is an example of the image's appearance if you add perspective: 1000px; to the column.
For more, check out how to use perspective with transform options to design 3D photo walls in Divi.
Continue Learning
See what's possible using the Transform options within Divi! Check out these blog articles detailing many ways to use the transform options.