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.
