{"id":3567,"date":"2021-09-23T14:06:10","date_gmt":"2021-09-23T14:06:10","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3567"},"modified":"2023-02-28T00:37:04","modified_gmt":"2023-02-28T00:37:04","slug":"js-tutorial-subtle-3d-rotation-image-distortion-with-jquery-ui-css-tweenmax-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-subtle-3d-rotation-image-distortion-with-jquery-ui-css-tweenmax-js\/","title":{"rendered":"JS Tutorial &#8211; Subtle 3D Rotation Image Distortion with jquery-ui.css, tweenmax.js"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; JS Tutorial &#8211; This is an example of the 3D distortion hover effect in jQuery.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"JS Tutorial - Subtle 3D Rotation Image Distortion with jquery-ui.css, tweenmax.js\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/LYrPbWL?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/LYrPbWL\"><br \/>\nJS Tutorial &#8211; Subtle 3D Rotation Image Distortion with jquery-ui.css, tweenmax.js<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">init3D();\r\n\r\nfunction init3D() {\r\n    var $workItem = $(\".work__item\");\r\n\r\n    $workItem.each(function() {\r\n        $(this).data(\"xPos\", $(this).offset().left);\r\n        $(this).data(\"yPos\", $(this).offset().top);\r\n        $(this).data(\"itemWidth\", $(this).width());\r\n        $(this).data(\"itemHeight\", $(this).height());\r\n        $(this).data(\"imgOuter\", $(this).find(\".work__item-img-outer\"));\r\n    });\r\n\r\n    $workItem.mousemove(function(e) {\r\n        var xPos = $(this).data(\"xPos\");\r\n        var yPos = $(this).data(\"yPos\");\r\n        var mouseX = e.pageX;\r\n        var mouseY = e.pageY;\r\n        var left = mouseX - xPos;\r\n        var top = mouseY - yPos;\r\n        var origin = \"center center -300\";\r\n        var xPerc =\r\n            (left - $(this).data(\"itemWidth\") \/ 2) \/ $(this).data(\"itemWidth\") * 200;\r\n        var yPerc =\r\n            (top - $(this).data(\"itemHeight\") \/ 2) \/ $(this).data(\"itemHeight\") * 200;\r\n\r\n        TweenMax.to($(this).data(\"imgOuter\"), 2, {\r\n            rotationX: 0.1 * yPerc,\r\n            rotationY: -0.1 * xPerc,\r\n            transformOrigin: origin,\r\n            ease: Expo.easeOut\r\n        });\r\n    });\r\n\r\n    $workItem.on(\"mouseleave\", function() {\r\n        TweenMax.to($(this).data(\"imgOuter\"), 2, {\r\n            rotationX: 0,\r\n            rotationY: 0,\r\n            transformOrigin: origin,\r\n            ease: Expo.easeOut\r\n        });\r\n    });\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; JS Tutorial &#8211; This is an example of the <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-subtle-3d-rotation-image-distortion-with-jquery-ui-css-tweenmax-js\/\" title=\"JS Tutorial &#8211; Subtle 3D Rotation Image Distortion with jquery-ui.css, tweenmax.js\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[264,371,263,370,352,103,227],"newstopic":[],"class_list":{"0":"post-3567","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript-tutorial","9":"tag-jquery-ui-css","10":"tag-js-tutorial","11":"tag-subtle-3d-rotation-image-distortion","12":"tag-tweenmax-js","13":"tag-web-design","14":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3567"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3567\/revisions"}],"predecessor-version":[{"id":3569,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3567\/revisions\/3569"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3568"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3567"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}