--- 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-08-19 author: "Aditya Sharma" description: "Are you looking to add a transform effect to your WordPress blocks? Adding transform effects in WordPress is a simple way to make your website look more modern and interactive...." image: https://nexterwp.com/wp-content/uploads/2026/01/How-to-Add-a-Transform-Effect-in-WordPress-1024x538.jpg word_count: 678 --- # 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. Are you looking to add a transform effect to your WordPress blocks? Adding transform effects in WordPress is a simple way to make your website look more modern and interactive. With transform effects, you can move, rotate, scale, or skew elements to create smooth hover effects and eye-catching animations. With the Transform & Transition feature from Nexter Blocks, you can easily add different transform effects to your WordPress elements. ## Required Setup - Make sure the default WordPress Block editor is active.  - You need to have the Nexter Blocks plugin installed and activated. ## How to Activate the Transform & Transition Extension? There are no settings to activate this option; it will be enabled by default for all the blocks from Nexter Blocks. ## Key Features - **Rotate **- You can easily rotate an element. - **Offset** -  You can easily move an element to the x, y and z axes. - **Scale** - You can easily scale an element. - **Skew** - You can easily skew an element. - **Hover Effect** - You add the transform effects on hover. ## How to Use the Transform Effect? Open the page or post where you want to add the transform effect and add a block from Nexter Blocks. Then go to the Advanced > Transform & Transition tab, where you’ll find different transform options. > *Note: The Transform & Transition effect is only applicable to the blocks from Nexter Blocks.* ### Rotate With this option, you can rotate the block as needed. Simply drag the cursor to rotate it, or enter a specific angle to set an exact rotation degree. #### 3D Rotate To add a 3D effect to the block, enable the **Rotate 3D** toggle. This option gives you more control over how the block appears in 3D space, using the following settings: - **Rotate X**: Tilts the block up or down, like flipping it forward or backward. - **Rotate Y**: Rotates the block left or right, creating a side-to-side turning effect. - **Perspective**: Controls the depth of the 3D effect, making the rotation look more realistic by adjusting how close or far the block appears. ### Offset For **Offset** effects, you’ll find three different axis options: - **Offset X**: Moves the block left or right on the screen. - **Offset Y**: Moves the block up or down. - **Offset Z**: Moves the block forward or backward in 3D space. You’ll see this option only if the **Rotate 3D **is enabled from the **Rotate** section.  ### Scale With the **Scale** option, you can control the size of the block. - When the **Keep Proportions** toggle is enabled, the block scales uniformly, keeping its width and height in proportion. - When the toggle is turned off, you can scale the block separately on the **X** and **Y** axes for more precise control. ### Skew The **Skew** option allows you to tilt the block along the **X** or **Y** axis, giving it a slanted look. - **Skew X**: Tilts the block left or right by slanting it horizontally. - **Skew Y**: Tilts the block forward or backward by slanting it vertically. If you want to flip the block horizontally or vertically, you can easily do so using this option.  **Flip Horizontal** - Enable this toggle to flip the block horizontally. **Flip Vertical** - Enable this toggle to flip the block vertically. **Transition Duration (ms)**: Set how long the transition effect takes to complete. A lower value makes the effect faster, while a higher value creates a smoother and slower transition. > *Note: The transition duration works only when a transform is applied on hover.* **Transition Function (Effect)**: Choose how the transition moves from start to end, such as smooth, linear, or ease-in-out, to control the overall feel of the animation. **Transition Origin**: Define the starting point of the transition effect, such as the center, top, bottom, left, or right of the block. This affects how the transformation is applied. ## Add Transform Effect on Hover You can also add a transform effect to your block for the hover state. In the Hover tab, you’ll find the same options - **Rotate**, **Offset**, **Scale**, and **Skew**, allowing you to create interactive effects when users move their cursor over the block. ## 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.