---
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-04-14
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.