# Transforms Extension Settings 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](https://master-addons.com/extension/transforms/) in [Master Addons Pro](https://master-addons.com/widgets-and-extensions/) adds a transform panel to 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 pixels, from -1000 to 1000. - **Rotate:** turn it on the X, Y or Z axis, from -180 to 180 degrees. - **Scale:** enlarge or shrink it on each axis independently, from 0 to 5. - **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](https://master-addons.com/docs/getting-started/installing-plugin/) first. - A [Master Addons Pro](https://master-addons.com/pricing/) license, because Transforms is a Pro extension. ## 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](https://master-addons.com/extension/entrance-animation/) and Reveal. Click its toggle so it turns purple, then hit **Save Changes** and wait for the green “Settings saved successfully” notice. ![Transforms extension toggle with the Hot badge in the Animation Widgets section of the Master Addons Extensions tab](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02073452/01-enable-transforms-extension.webp) ## 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. ![Transforms panel in the Elementor Advanced tab showing Translate, Rotate, Scale, Skew, and Flip controls under Normal and Hover tabs](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02073458/02-transforms-panel.webp) ## 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 in pixels, and each axis has its own responsive setting per device. ![Translate X slider set to 71 in the Transforms panel moving an image toward the section edge in Elementor](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02073504/03-translate-settings.webp) 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. Scale Y stays at its default of 1 unless you change it, so set both for an even enlargement. ![Scale X set to 1.4 in the Transforms panel enlarging an image past its column edge in the Elementor editor](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02073510/04-scale-settings.webp) 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. ![Hover tab of the Transforms panel with Flip Horizontal enabled and Transition Duration set to 400 milliseconds](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02073516/05-hover-transforms.webp) ## 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 plain CSS with one small stylesheet, and the layout around the element never reflows. ![Published page with the image scaled and shifted past its column edge by the Transforms extension](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/02073948/06-transforms-front-end-clean.webp) 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. Elementor’s own Transform section in the Advanced tab offers similar controls for free. 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 X, Y and Z, Scale X and Y, Skew X and Y, Flip Horizontal, and Flip Vertical, each available in both normal and hover states. The sliders are responsive, so values can differ per device. Is the Transforms extension free?No. Transforms is a Pro extension in Master Addons. Elementor also has a free Transform section in the Advanced tab with similar controls, and the Transforms extension page compares the two. ## Wrapping up The [Transforms extension](https://master-addons.com/extension/transforms/) 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](https://master-addons.com/extension/entrance-animation/) for elements that arrive in motion, and the full lineup of [Master Addons widgets and extensions](https://master-addons.com/widgets-and-extensions/) covers the rest. --- Source: https://master-addons.com/docs/extensions/transforms-extension/