Grid layouts are tidy, and tidy can get boring. An image that leans out of its column, or a card that grows slightly under the cursor: small transforms like these separate a designed page from a stacked one. The Transforms extension in Master Addons for Elementor puts the full CSS transform toolkit on every element: translate, rotate, scale, skew, and flip, with separate settings for normal and hover states.
What the Transforms extension does #
Once enabled, every Elementor element gets a Transforms section under its Advanced tab. Flip Enabled Transforms to Yes and six controls appear, each applying a CSS transform to the element without touching the actual layout flow:
- Translate: move the element along the X and Y axes, in percent of its own size.
- Rotate: spin it by any angle.
- Scale: enlarge or shrink it on each axis independently.
- Skew: slant it for a diagonal, dynamic look.
- Flip Horizontal / Flip Vertical: mirror it with one click.
The Normal and Hover tabs hold separate values, so an element can sit one way at rest and transform when the cursor lands on it, with a transition duration you control.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? Follow the installation guide first.
- Transforms is a free extension, so no Pro license is required.
How to enable the Transforms extension #
From your WordPress dashboard, go to Master Addons and open the Extensions tab. Transforms sits in the Animation Widgets group with a Hot badge, between Entrance Animation and Reveal. Click its toggle so it turns purple, then hit Save Changes and wait for the green “Settings saved successfully” notice.
Open the Transforms panel on an element #
Select the element in the Elementor editor, an Image widget in the demo, and open the Advanced tab. Expand the Transforms section with the purple MA badge and switch Enabled Transforms to Yes. The six transform controls appear under the Normal and Hover tabs, each opening with its pencil icon.
Move and scale the element #
Click the pencil next to Translate and two sliders open: Translate X and Translate Y. The demo pushes the image 71 on the X axis, and it slides toward the edge of the section on the canvas as the slider moves. Values are relative to the element’s own size, and each axis has its own responsive setting per device.
The Scale control works the same way. Setting Scale X to 1.4 in the demo enlarges the image beyond its column, overlapping the section boundary for the kind of breakout framing a plain grid cannot do. Leave Scale Y empty and it follows X, or set both for independent stretching.
Rotate and Skew work the same way. Open the control, drag the slider, and the canvas shows the angle as you go.
Add a hover transform #
Switch to the Hover tab and the same controls apply only while the cursor is on the element, plus two extras: Flip Horizontal and Flip Vertical become Yes/No switches, and a Transition Duration (ms) slider controls how fast the change animates. The demo turns on Flip Horizontal with a 400ms transition, so the image mirrors itself smoothly on hover and snaps back when the cursor leaves.
The result on the page #
Publish and check the front end. The image sits shifted and enlarged past its column exactly as arranged in the editor, and hovering it plays the flip with the 400ms ease. The transforms are pure CSS, so nothing extra loads and the layout around the element never reflows.
One thing to remember: transforms are visual only. The element still occupies its original spot in the layout, so a heavily translated element can overlap its neighbors. That is usually the point, but check tablet and mobile, where the same offset covers more of the screen.
Where transforms earn their place #
- Breakout images. A photo scaled and shifted past its column edge gives a hero section depth.
- Hover feedback. Cards that lift, tilt, or grow slightly under the cursor read as clickable.
- Rotated accents. Badges, stamps, and labels sit more naturally at a slight angle.
- Skewed sections. A few degrees of skew on a divider or button breaks the rectangle monotony.
- Mirrored assets. Flip one arrow or illustration instead of exporting a second image.
Video Tutorial #
Watch every control in action, from enabling the extension to the hover flip on the published page.
Frequently Asked Questions #
How do I rotate or scale an element in Elementor?
Enable the Transforms extension in the Master Addons Extensions tab, select the element, and open Transforms under the Advanced tab. Turn on Enabled Transforms, then use the Rotate or Scale control; the canvas previews the change live as you drag the slider.
Can I apply a different transform on hover?
Yes. The panel has separate Normal and Hover tabs. Set resting values in Normal, hover values in Hover, and use the Transition Duration slider to control how quickly the element animates between the two states.
Do transforms break my page layout?
No. CSS transforms are visual only, so the element keeps its original space in the layout and surrounding content never reflows. A transformed element can overlap neighbors by design, so preview tablet and mobile to confirm the offsets still look right.
Which transforms does the extension include?
Translate X and Y, Rotate, Scale X and Y, Skew, Flip Horizontal, and Flip Vertical, each available in both normal and hover states. Every control is responsive, so values can differ per device.
Is the Transforms extension free?
Yes. Transforms ships with the free version of Master Addons for Elementor, in the Animation Widgets group of the Extensions tab. The pricing page covers what the Pro plans add.
Wrapping up #
The Transforms extension hands you the CSS transform toolkit inside the Elementor panel: move, rotate, scale, skew, and flip anything, with hover states and smooth transitions included. Start with one breakout image or one hover lift and build from there. It pairs naturally with the Entrance Animation extension for elements that arrive in motion, and the full lineup of Master Addons widgets and extensions covers the rest.
