{"id":334,"date":"2023-08-14T10:06:00","date_gmt":"2023-08-14T07:06:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=334"},"modified":"2025-06-16T15:04:04","modified_gmt":"2025-06-16T12:04:04","slug":"mouse-effects-3d-tilt","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/","title":{"rendered":"Mouse Effects &#8211; 3D Tilt"},"content":{"rendered":"\n<p>Set an element to tilt in relation to the visitor\u2019s mouse movement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif\" alt=\"3d\" class=\"wp-image-1430\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced or Style &gt; Background<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Motion Effects<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Mouse Effects<\/strong>: Slide to ON<\/li>\n\n\n\n<li><strong>3D Tilt<\/strong>: Click pencil edit icon<br><span style=\"padding-left: 10px\"><strong>Direction<\/strong>: Choose from Opposite or Direct. Opposite will tilt the element in the opposite direction of the mouse movement. Direct will tilt the element in the same direction as the mouse movement.<\/span><br><span style=\"padding-left: 45px\"><strong>Speed<\/strong>: Set the tilt speed from 0 to 10<\/span><\/li>\n\n\n\n<li><strong>Apply Effects On<\/strong>: Select to apply the motion effects on Desktop, Tablet, and\/or Mobile devices.<\/li>\n\n\n\n<li><strong>Effects Relative To<\/strong>: Choose from Default, Viewport, or Entire Page<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"536\" height=\"706\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt-panel.png\" alt=\"\" class=\"wp-image-1431\" style=\"width:268px;height:353px\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt-panel.png 536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt-panel-228x300.png 228w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-embed 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 Mouse Track Animations to Your Hero Section in Elementor\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/FAqAsEEwu0M?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","protected":false},"excerpt":{"rendered":"<p>Learn how to set an element to tilt in relation to the user&#8217;s mouse movement<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3cfcf648eb03120948c96"],"footnotes":""},"categories":[1440],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-334","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mouse Effects - 3D Tilt | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Mouse Effects - 3D Tilt 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\/mouse-effects-3d-tilt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mouse Effects - 3D Tilt | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Mouse Effects - 3D Tilt in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-14T07:06:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-16T12:04:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"338\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\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<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Mouse Effects &#8211; 3D Tilt\",\"datePublished\":\"2023-08-14T07:06:00+00:00\",\"dateModified\":\"2025-06-16T12:04:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/\"},\"wordCount\":106,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/\",\"url\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/\",\"name\":\"Mouse Effects - 3D Tilt | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif\",\"datePublished\":\"2023-08-14T07:06:00+00:00\",\"dateModified\":\"2025-06-16T12:04:04+00:00\",\"description\":\"Learn everything about Mouse Effects - 3D Tilt in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif\",\"width\":600,\"height\":338},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#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\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Mouse Effects &#8211; 3D Tilt\"}]},{\"@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":"Mouse Effects - 3D Tilt | Elementor","description":"Learn everything about Mouse Effects - 3D Tilt 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\/mouse-effects-3d-tilt\/","og_locale":"en_US","og_type":"article","og_title":"Mouse Effects - 3D Tilt | Elementor","og_description":"Learn everything about Mouse Effects - 3D Tilt in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/","og_site_name":"Help","article_published_time":"2023-08-14T07:06:00+00:00","article_modified_time":"2025-06-16T12:04:04+00:00","og_image":[{"width":600,"height":338,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif","type":"image\/gif"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Mouse Effects &#8211; 3D Tilt","datePublished":"2023-08-14T07:06:00+00:00","dateModified":"2025-06-16T12:04:04+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/"},"wordCount":106,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Advanced functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/","url":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/","name":"Mouse Effects - 3D Tilt | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif","datePublished":"2023-08-14T07:06:00+00:00","dateModified":"2025-06-16T12:04:04+00:00","description":"Learn everything about Mouse Effects - 3D Tilt in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/Mouse-Effects-3D-Tilt.gif","width":600,"height":338},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/mouse-effects-3d-tilt\/#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":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Mouse Effects &#8211; 3D Tilt"}]},{"@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\/334","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=334"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":58929,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/334\/revisions\/58929"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}