{"id":20517,"date":"2025-12-08T12:17:36","date_gmt":"2025-12-08T12:17:36","guid":{"rendered":"https:\/\/essential-blocks.com\/?post_type=docs&#038;p=20517"},"modified":"2025-12-17T05:23:35","modified_gmt":"2025-12-17T05:23:35","password":"","slug":"transform","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/transform\/","title":{"rendered":"EB Transform"},"content":{"rendered":"\n<p><a href=\"https:\/\/essential-blocks.com\/demo\/transform\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>EB Transform<\/strong><\/a> feature allows you to display blocks dynamically with versatile transform effects like rotate, translate, skew, etc., right inside the Gutenberg editor. With this feature, you can now rotate, make 3D effects and create stunning hover effects.<\/p>\n\n\n\n<p>Follow this guide to learn how to transform blocks for your website using the Transform in Essential Blocks in Gutenberg.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add Transform Motion Effects in Gutenberg? [Without Coding]\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/DPiAYC1M1cM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Activate the EB Transform?<\/strong><\/h2>\n\n\n\n<p>To activate the Transform, navigate to the block you want to implement the Transform effect on. Then, from the <strong>\u2018Advanced\u2019<\/strong> section, toggle the button to enable it.&nbsp;<\/p>\n\n\n\n<p><strong><em>Note:<\/em><\/strong><em> Transform is a premium feature and only applicable in the Essential Blocks block library. To use this, you will need to <\/em><a href=\"https:\/\/essential-blocks.com\/docs\/install-activate-essential-blocks-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>install and activate the Essential Blocks PRO<\/em><\/strong><\/a><em> plugin on your website along with the free version.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"2880\" height=\"1496\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/1.-Enable-Transform-feature.gif\" alt=\"Enable EB Transform feature in Essential Blocks\" class=\"wp-image-20518\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How To Configure the Transform Effects From the Gutenberg Editor?<\/strong><\/h2>\n\n\n\n<p>Open the page or post where you want to add the transform effects using the EB Transform. After selecting the block and enabling the Transform effect, you will now find different options. Here is the list of options you can use for a normal effect.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Rotate<\/strong><\/h3>\n\n\n\n<p>With this option, you can adjust the rotation of the block. Drag the cursor to rotate the block or add a specific angle degree for the block rotation.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"665\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Rotate-GIF.gif\" alt=\"Rotate with EB Transform feature\" class=\"wp-image-20520\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Rotate 3D<\/strong><\/h3>\n\n\n\n<p>To make a 3D effect on the block, toggle the <strong>\u2018Rotate 3D<\/strong>\u2019 to enable it. In this effect, you will find different options to showcase the block on the X and Y axis. Here, what this axis does:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rotate X:<\/strong> Tilts the block up or down, like flipping it forward or backward.<\/li>\n\n\n\n<li><strong>Rotate Y:<\/strong> Turns the block left or right, as if rotating it side-to-side.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"2880\" height=\"1496\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Rotate-3D.gif\" alt=\"Rotate 3D in EB Transform\" class=\"wp-image-20522\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Perspective<\/strong><\/h3>\n\n\n\n<p>With this effect, adjust how \u201c3D\u201d the block looks, making it appear closer or farther away.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"664\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Perspective-GIF.gif\" alt=\"Perspective in EB Transform\" class=\"wp-image-20523\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Offset<\/strong><\/h3>\n\n\n\n<p>For the Offset effects, you will find 3 different axis. Those are:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Offset X:<\/strong> Moves the block left or right on the screen.<\/li>\n\n\n\n<li><strong>Offset Y:<\/strong> Moves the block up or down.<\/li>\n\n\n\n<li><strong>Offset Z: <\/strong>Moves the block forward or backward in 3D space.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"664\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Offset-GIF.gif\" alt=\"Offset in EB Transform\" class=\"wp-image-20524\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Scale<\/strong><\/h3>\n\n\n\n<p>This effect<strong> <\/strong>makes the block appear larger or smaller.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"664\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Scale-GIF.gif\" alt=\"Scale in EB Tranform\" class=\"wp-image-20525\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Skew Effect<\/strong><\/h3>\n\n\n\n<p>To lean the different blocks in the X or Y axis, this effect can be used. Here, both axis works:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Skew X:<\/strong> Lean the block horizontally, stretching it sideways.<\/li>\n\n\n\n<li><strong>Skew Y:<\/strong> Lean the block vertically, stretching it up or down.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"664\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Skew-GIF.gif\" alt=\"Skew effect in EB Transform\" class=\"wp-image-20526\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>If you want to flip the block, horizontally or vertically, then you will find the option to enable or disable it. Simply toggle the button and your block will adjust accordingly.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"2880\" height=\"1496\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Flip-Horizontal-or-vertica.gif\" alt=\"Flip horizontal and vertical \" class=\"wp-image-20528\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How To Configure the Transform For the Hover Effect?<\/strong><\/h2>\n\n\n\n<p>In the transform feature, you can style your block in the Hover effect as well. You will find similar effects like Rotate, 3D Rotate, Perspective, Offset, Scale, and Skew effects in the settings. Additionally, you can set the Transition Duration for this effect.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"665\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Hover-Effect-GIF.gif\" alt=\"Transform in Hover Effect\" class=\"wp-image-20529\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Outcome<\/strong><\/h2>\n\n\n\n<p>By following the basic steps and a bit more modification, you can style your block EB Transform feature however you want.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1280\" height=\"638\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2025\/12\/Final-Outcome-GIF.gif\" alt=\"EB Transform Final Outcome\" class=\"wp-image-20530\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>With the help of EB Transform, this is how you can stylishly showcase your blocks and grab everyone\u2019s attention.<\/p>\n\n\n\n<p>Getting stuck? Feel free to <a href=\"https:\/\/wpdeveloper.net\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Contact Our Support<\/strong><\/a> for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Configure how to implement EB Transform in the Gutenberg editor. <\/p>\n","protected":false},"author":43,"featured_media":20530,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[11],"doc_tag":[1191,1189,1190,1192],"class_list":["post-20517","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-effect","doc_tag-transform","doc_tag-transform-effect","doc_tag-website-block-effect"],"year_month":"2026-04","word_count":540,"total_views":"128","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Maahi","author_nicename":"maahi","author_url":"https:\/\/essential-blocks.com\/author\/maahi\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/essential-blocks.com\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Effect","term_url":"https:\/\/essential-blocks.com\/docs-tag\/effect\/"},{"term_name":"Transform","term_url":"https:\/\/essential-blocks.com\/docs-tag\/transform\/"},{"term_name":"Transform effect","term_url":"https:\/\/essential-blocks.com\/docs-tag\/transform-effect\/"},{"term_name":"Website Block Effect","term_url":"https:\/\/essential-blocks.com\/docs-tag\/website-block-effect\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/20517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/43"}],"version-history":[{"count":3,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/20517\/revisions"}],"predecessor-version":[{"id":20749,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/20517\/revisions\/20749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/20530"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=20517"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=20517"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=20517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}