--- title: "How to Add a Transform Effect in WordPress?" url: https://nexterwp.com/docs/add-a-transform-effect-in-wordpress/ date: 2026-01-23 modified: 2026-10-02 lang: en author: "Aditya Sharma" description: "Sometimes a block needs to sit at a slight angle, overlap the section above it, or mirror itself — the sort of adjustment that would otherwise mean custom CSS. The..." image: https://nexterwp.com/wp-content/uploads/2026/01/How-to-Add-a-Transform-Effect-in-WordPress-1024x538.jpg word_count: 617 --- # How to Add a Transform Effect in WordPress? ## Key Takeaways - Nexter Blocks enables Transform & Transition effects on WordPress blocks by default, with no settings needed to activate the extension. - Rotate supports exact angle input and a Rotate 3D toggle with Rotate X, Rotate Y, and Perspective controls. - Offset moves a block on the X, Y, and Z axes, and Offset Z appears only when Rotate 3D is enabled. - Scale, Skew, and hover state options let a block resize with Keep Proportions, tilt on X or Y, and apply the same transform controls in the Hover tab. Sometimes a block needs to sit at a slight angle, overlap the section above it, or mirror itself — the sort of adjustment that would otherwise mean custom CSS. The transform options do all of that from the Advanced tab, without touching a stylesheet. ## Before You Start - **Edition:** **Pro** — transform effects needs Nexter Blocks Pro.- **Block to enable:** any Nexter block, switched on under **Nexter > Blocks** in your WordPress dashboard.- This is an **Advanced tab** option, so it is available on Nexter blocks generally rather than being a block of its own. Open any Nexter block and look under **Advanced**. ## Preview ![Nexter Blocks Advanced tab, Transform & Transition panel: the Normal and Hover tabs with Rotate, Offset, Scale and Skew, the Flip Horizontal and Flip Vertical toggles, and Transition Duration, Function and Origin](https://nexterwp.com/wp-content/uploads/2026/09/transform-settings-full.webp) ## Steps - Select your block, open the **Advanced** tab and expand **Transform & Transition**. Click the settings button next to **Rotate** and set **Rotate (deg)**. ![Nexter Blocks Advanced tab, Transform & Transition panel: the Rotate popover with Rotate (deg) set to 30 and the 3D Rotate toggle off](https://nexterwp.com/wp-content/uploads/2026/09/transform-rotate-full.webp) - Turn on **3D Rotate** for depth, then set **Rotate X**, **Rotate Y** and **Perspective**. ![Nexter Blocks Advanced tab, Transform & Transition panel: the Rotate popover with 3D Rotate on, Rotate X 40, Rotate Y 30 and Perspective 800](https://nexterwp.com/wp-content/uploads/2026/09/transform-3d-rotate-full.webp) - Open Offset to move the block along X and Y. ![Nexter Blocks Advanced tab, Transform & Transition panel: the Offset popover with Offset X 40 px and Offset Y 20 px](https://nexterwp.com/wp-content/uploads/2026/09/transform-offset-full.webp) - Open Scale to resize it. Switch Keep Proportions off to scale each axis separately. ![Nexter Blocks Advanced tab, Transform & Transition panel: the Scale popover with Keep Proportions on and Scale 1.5](https://nexterwp.com/wp-content/uploads/2026/09/transform-scale-full.webp) - Open Skew to tilt the block along X and Y. ![Nexter Blocks Advanced tab, Transform & Transition panel: the Skew popover with Skew X 20 degrees and Skew Y 5 degrees](https://nexterwp.com/wp-content/uploads/2026/09/transform-skew-full.webp) - Turn on Flip Horizontal or Flip Vertical to mirror it, then publish and check the real page at each screen size. ![Nexter Blocks Advanced tab, Transform & Transition panel: Flip Horizontal switched on and the heading mirrored in the editor canvas](https://nexterwp.com/wp-content/uploads/2026/09/transform-flip-full.webp) Switch to the Hover tab to give the block a different transform while the pointer is over it, and set Transition Duration so the change animates. ![Nexter Blocks Advanced tab, Transform & Transition panel: the Hover tab with Scale 1.2 and Transition Duration 300 ms](https://nexterwp.com/wp-content/uploads/2026/09/transform-hover-full.webp) ## How It Behaves Every variant compiles into one CSS transform matrix on the block. - **Measured on published pages**, each value producing exactly the expected matrix: rotating 30° gave `matrix(0.866025, 0.5, -0.5, 0.866…)`; an offset of 40 by 20 pixels gave `matrix(1,0,0,1,40,20)`; a scale of 1.5 gave `matrix(1.5,0,0,1.5,0,0)`; a horizontal flip gave `matrix(-1,0,0,1,0,0)`.- **Skew and combinations were measured too** — a skew of 20 by 5, and a rotation and scale together, both produced a single combined matrix rather than two separate rules.- **Transform does not move the space the block occupies.** The layout still reserves the original position, which is why a rotated block can overlap whatever is next to it.- **Order matters when you combine.** Rotating then scaling is not the same as scaling then rotating.- **Measured with Nexter Blocks Pro deactivated:** the effect disappears entirely and the block renders as though the option had never been set. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, no transform rule is generated and the block sits square.- **Overlap is the usual surprise.** Because the reserved space does not change, a moved or rotated block will sit on top of its neighbour unless you add spacing.- **Rotated text is harder to read**, and a lot harder at small sizes.- **Values set at desktop carry down to phones**, where a 40-pixel offset is a much larger share of the screen. Set them per breakpoint.- **A transformed block can cause sideways scrolling** if it moves past the edge of the page. ## Troubleshooting ### Nothing happens Check you are on the Normal tab (the Hover tab only applies while the pointer is over the block), that the value is set for the screen size you are viewing, and that Nexter Blocks Pro is active. ### My block overlaps the one below it Expected. Transform does not change the space the block reserves — add margin to compensate. ### The page scrolls sideways now The block has moved past the page edge. Reduce the offset, or set it to zero at smaller widths. ### It looks wrong on mobile Desktop values are inherited downwards. Set smaller values, or none, at the phone breakpoint. ### Combining two effects gives an odd result They compile into one matrix and the order is significant. Try setting one at a time to see which is doing what. ## Related Docs - [Add a glassmorphism effect in WordPress](https://nexterwp.com/docs/add-glassmorphism-effect-in-wordpress/)- [Add on scroll animation in WordPress](https://nexterwp.com/docs/add-on-scroll-animation-in-wordpress/)- [Add a sticky column in WordPress](https://nexterwp.com/docs/add-sticky-column-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why is the transform effect not showing on my WordPress block?** A: The Transform & Transition effect only applies to blocks from Nexter Blocks, so a regular WordPress block will not pick it up. Nexter Blocks also needs the default WordPress Block editor active, and the plugin must be installed and activated. If the block is from Nexter Blocks and still looks unchanged, check that you opened the block’s Advanced > Transform & Transition tab, since that is where the options live. **Q: Can I add transform effects to any WordPress block or only certain blocks?** A: The effect is limited to blocks from Nexter Blocks. That matters because the same Transform & Transition controls are not described as a global WordPress setting, they are tied to those blocks inside the Block editor. In practice, that means you add a Nexter Blocks block first, then adjust Rotate, Offset, Scale, or Skew from its Advanced > Transform & Transition tab. **Q: What is the best way to create a hover animation with transform effects in WordPress?** A: Hover effects are the cleanest use case when you want motion without changing the default layout. The Hover tab includes the same Rotate, Offset, Scale, and Skew options, so you can keep the normal state stable and only animate on mouseover. The transition duration works only when a transform is applied on hover, which makes hover state control more predictable than applying motion all the time. **Q: How do I make a block rotate in 3D instead of just flat rotation?** A: 3D rotation comes from enabling the Rotate 3D toggle in the Rotate section. That unlocks Rotate X for forward or backward tilting, Rotate Y for left or right turning, and Perspective for controlling how deep or realistic the 3D look feels. If you want a subtle effect, keep Perspective restrained so the block does not look exaggerated. **Q: What is the difference between Offset X, Y, and Z in WordPress transform effects?** A: Offset X moves a block left or right, Offset Y moves it up or down, and Offset Z moves it forward or backward in 3D space. Offset Z only appears when Rotate 3D is enabled in the Rotate section, so it depends on 3D mode being active. That makes Z useful when you want depth instead of simple screen movement.