{"id":27678,"date":"2023-08-12T11:28:43","date_gmt":"2023-08-12T08:28:43","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=27678"},"modified":"2024-02-02T09:44:47","modified_gmt":"2024-02-02T07:44:47","slug":"css-transform","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/css-transform\/","title":{"rendered":"Add special effects with CSS Transform"},"content":{"rendered":"\n<p>Transform your designs with the Elementor CSS Transform Controls. Rotate, offset, scale, skew, and flip your page elements with ease. These controls can be located in any compatible widget in the <em>Advanced Tab &gt; Transform<\/em> settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/TransfomWithRotateAndPerspectiveUsedv2.gif\" alt=\"\" class=\"wp-image-27679\"\/><\/figure>\n\n\n\n<p class=\"callout-yellow\">Note: Transform only works with widgets and not sections, columns, or inner sections at this time.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Controls<\/h2>\n\n\n\n<p>The controls for each CSS Transform effect may be set for both <strong>Normal<\/strong>, and <strong>Hover<\/strong> states. When editing a hover state, you may enter a duration of the effect to reduce the jitter or for visuals. They may also be set per breakpoint in the <strong>Responsive<\/strong> settings by clicking on the device icon located at the label of each control.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rotate<\/h3>\n\n\n\n<p>You may rotate your page elements easily by using the sliders or entering the values in the field based on degrees. Toggle the 3D Rotate to be able to rotate on a specific axis and change the perspective(px). The Rotate X and Y axis is to be used in combination with perspective to achieve the desired goal.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/Rotate.png\" alt=\"\" class=\"wp-image-27680\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Offset<\/h3>\n\n\n\n<p>Offset your elements horizontally on the X axis or vertically on the Y axis. The values can be controlled by the slider or entering the values in the text fields. The values can be measured in % or PX.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/Offset.png\" alt=\"\" class=\"wp-image-27681\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Scale<\/h3>\n\n\n\n<p>Scale elements to the perfect size in your design. The value can be controlled by the slider or entering the values in the text field based on %. You may also choose to keep the proportions intact by using the toggle control.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/Scale.png\" alt=\"\" class=\"wp-image-27682\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Skew<\/h3>\n\n\n\n<p>Use the skew controls to give your element a leaning effect. You may set the Skew X and Y values using the slider or manually entering the field values based on %.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/Skew.png\" alt=\"\" class=\"wp-image-27683\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Flip Horizontal<\/h3>\n\n\n\n<p>Use the Flip Horizontal icon control to reverse your element on the X axis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/Flip-Horizontal.png\" alt=\"\" class=\"wp-image-27684\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Flip Vertical<\/h3>\n\n\n\n<p>Use the Flip Vertical icon control to reverse your element on the Y axis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/Flip-Vertical.png\" alt=\"\" class=\"wp-image-27685\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Anchor Points<\/h3>\n\n\n\n<p>Use the anchor point controls to set the horizontal (X) and vertical (Y) basis in which you wish to define.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">X Anchor Point<\/h4>\n\n\n\n<p>Choose between left, center, or right anchor point using the icons.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Y Anchor Point<\/h4>\n\n\n\n<p>Choose between top, center, or bottom anchor point using the icons.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Transform your designs with the Elementor CSS Transform Controls. Rotate, offset, scale, skew, and flip your page elements with ease. These controls can be located in any compatible widget in the Advanced Tab &gt; Transform settings. Note: Transform only works with widgets and not sections, columns, or inner sections at this time.&nbsp; Controls The controls [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65b0f1b2ebbb87050b096b7a"],"footnotes":""},"categories":[1459],"tags":[],"class_list":["post-27678","post","type-post","status-publish","format-standard","hentry","category-advanced-settings"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add special effects with CSS Transform | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Add special effects with CSS Transform in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/css-transform\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add special effects with CSS Transform | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Add special effects with CSS Transform in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/css-transform\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-12T08:28:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-02T07:44:47+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Add special effects with CSS Transform\",\"datePublished\":\"2023-08-12T08:28:43+00:00\",\"dateModified\":\"2024-02-02T07:44:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/\"},\"wordCount\":374,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/TransfomWithRotateAndPerspectiveUsedv2.gif\",\"articleSection\":[\"Advanced settings\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/\",\"url\":\"https:\/\/elementor.com\/help\/css-transform\/\",\"name\":\"Add special effects with CSS Transform | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/TransfomWithRotateAndPerspectiveUsedv2.gif\",\"datePublished\":\"2023-08-12T08:28:43+00:00\",\"dateModified\":\"2024-02-02T07:44:47+00:00\",\"description\":\"Learn everything about Add special effects with CSS Transform in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/css-transform\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/css-transform\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Universal settings\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced settings\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/advanced-settings\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Add special effects with CSS Transform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add special effects with CSS Transform | Elementor","description":"Learn everything about Add special effects with CSS Transform in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/css-transform\/","og_locale":"en_US","og_type":"article","og_title":"Add special effects with CSS Transform | Elementor","og_description":"Learn everything about Add special effects with CSS Transform in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/css-transform\/","og_site_name":"Help","article_published_time":"2023-08-12T08:28:43+00:00","article_modified_time":"2024-02-02T07:44:47+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/css-transform\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/css-transform\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Add special effects with CSS Transform","datePublished":"2023-08-12T08:28:43+00:00","dateModified":"2024-02-02T07:44:47+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/css-transform\/"},"wordCount":374,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/css-transform\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/TransfomWithRotateAndPerspectiveUsedv2.gif","articleSection":["Advanced settings"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/css-transform\/","url":"https:\/\/elementor.com\/help\/css-transform\/","name":"Add special effects with CSS Transform | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/css-transform\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/css-transform\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/11\/TransfomWithRotateAndPerspectiveUsedv2.gif","datePublished":"2023-08-12T08:28:43+00:00","dateModified":"2024-02-02T07:44:47+00:00","description":"Learn everything about Add special effects with CSS Transform in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/css-transform\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/css-transform\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/css-transform\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/css-transform\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Universal settings","item":"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/"},{"@type":"ListItem","position":4,"name":"Advanced settings","item":"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/advanced-settings\/"},{"@type":"ListItem","position":5,"name":"Add special effects with CSS Transform"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=27678"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27678\/revisions"}],"predecessor-version":[{"id":36628,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/27678\/revisions\/36628"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=27678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=27678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=27678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}