{"id":9239,"date":"2018-11-30T07:16:19","date_gmt":"2018-11-30T07:16:19","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=9239"},"modified":"2021-08-30T06:28:26","modified_gmt":"2021-08-30T06:28:26","slug":"jquery-hover3d","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/jquery-hover3d\/","title":{"rendered":"JQUERY HOVER3D"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\"><em><span style=\"text-decoration: underline;\"><strong>Made by:<\/strong><\/span><\/em><\/p>\n<ul>\n<li>Rian Ariona<\/li>\n<li class=\".last-child\"><time>March 11, 2016<\/time><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><em><span style=\"text-decoration: underline;\"><strong><span class=\"about-the-item\">About the plugin:<\/span><\/strong><\/span><\/em><\/p>\n<p>This is a nice and simple hover script for creating 3d hover effect. It&#8217;s an experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect. The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value.<\/p>\n<a href=\"https:\/\/github.com\/ariona\/hover3d\/archive\/master.zip\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"http:\/\/ariona.github.io\/hover3d\/index.html\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo<\/span><\/a>\n<a href=\"https:\/\/github.com\/ariona\/hover3d\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Github Page<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Made by: Rian Ariona March 11, 2016 About the plugin: This is a nice and simple hover script for creating 3d hover effect. It&#8217;s an experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect. The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value.<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":9244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2540],"tags":[583,2541,2547],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/9239"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=9239"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/9239\/revisions"}],"predecessor-version":[{"id":28777,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/9239\/revisions\/28777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/9244"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=9239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=9239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=9239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}