Transform settings allow you to change the position, size, and dimension of the element without actually displacing the container wrapper or affecting the position of other elements on the page.
Best use of these settings can be seen in various web design practices like an image growing up in size or a button moving slightly towards the top on hover (giving it a floating effect), etc.
You can find the settings to apply Element Transformations in the new Powerup tab.
Getting the most value out of Transformations:
Here are the different ways Element Transformations can help you spice up your designs:
- Rotate, skew, scale any element/widget on normal or hover states.
- Add 3D perspective to images or other widgets.
- Make sections or columns scale, skew, or move on hover.
Adding CSS Transform to Elementor Element:
- Select the desired Element (Section/Column/Widget).
- Navigate to the Transform section in the Powerup tab.
- Turn on the switch to enable transformation for that state. The controls for different transformations will now appear
- Change the control settings to apply transformations as required.
How to use 3D Perspective control
The 3D perspective control lets you add a 3D space to your elements. With this control, you can determine the intensity of the 3D transformation you want to apply to the element.
3D perspective in combination with other transform controls can help you create some cool effects.
CSS Transform can be applied to Normal and Hover states by switching tabs. To smooth out the hover effect, apply a transition.
Tip: Generally, scaling has the same X and Y coordinate values so that the element stays in proportion.
Note:
- You can apply transform effects to widgets, columns, and sections.
- Do not manually remove the number from the input field to remove a particular transition. Doing that will break the settings and transformations will not work. Instead, drag the slider and put it back to where you started from to not apply that particular transformation.