UP TO
30%

off all products

Ending in:
Wpmet Symbol
Day
Hrs
Min
Sec

CSS Transform Controls

Rotate, offset, scale, and flip your blocks, patterns, containers, or sections in Gutenberg without touching a single line of CSS code. 

GutenKit comes with CSS Transform controls for Gutenberg that let you transform block styles with real-time editing.

Prerequisite:  #

CSS Transform is a premium module from GutenKit. So you need to have both GutenKit Lite and GutenKit Pro plugins installed on your WordPress site.

  1. GutenKit Lite (Free Version): Download Plugin
  2. GutenKit Pro: Get The Plugin

How to CSS Transform Gutenberg Blocks Styles #

You can do the following style transformation for any block, section, or pattern in the WordPress block editor:

  1. Rotate
  2. Offset
  3. Scale
  4. Skew
  5. Flip Horizontal
  6. Flip Vertical

Learn how to transform styles in Gutenberg using GutenKit CSS Transform module.

Step 1: Enable CSS Transform module #

To enable the CSS Transform module, first, log in to your WordPress site. From your WordPress dashboard:

  1. Navigate to GutenKit > Modules and find CSS Transform module from the list.
  2. Enable the block by turning on the toggle button.
Enable CSS transform module for Gutenberg

Step 2: Use CSS Transform feature to transform block styles #

To transform CSS styles in Gutenberg, choose a block or container, and move to the Advanced tab.

Under the Advanced Tab, you will find the CSS Transform controls.

find css transform module in Gutenberg block editor

Now transform the following styles 👇 You can apply these CSS transformations as both default style and hover effects.

✅ Rotate

You can rotate any block, container, or section in 360 degrees around. Enable 3D Rotate to rotate the section in vertical and horizontal axis individually.

Rotate Gutenberg blocks with CSS transform

✅ Offset

Easily add CSS offset properties to the block elements in the Gutenberg.

Offset effect CSS transform Gutenberg blocks

✅ Scale

Easily scale up or scale down any element in your design. You can individually change the scale in the X-axis and Y-axis, or keep the aspect ratio the same by enabling the “Keep Properties” option.

Change the scale of Gutenberg blocks with CSS transformation

✅ Skew

Add the tilt effect to any section, element, or block on the x-axis and y-axis. 

Skew Gutenberg blocks with CSS transform

Flip Horizontal

Flip the elements in the horizontal direction.

Flip Gutenberg blocks in horizontal direction with CSS transform

Flip Vertical

Flip the elements in the vertical direction.

Flip Gutenberg blocks in horizontal direction with CSS transform

Like CSS transform controls, GutenKit comes with tons more advanced features for block editor that bring the page builder features into your website built with Gutenberg.

What are your feelings
Updated on May 12, 2024