{"id":16364,"date":"2019-02-25T07:46:49","date_gmt":"2019-02-25T07:46:49","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=16364"},"modified":"2020-12-15T07:15:55","modified_gmt":"2020-12-15T07:15:55","slug":"futuristic-3d-hover-effect","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/futuristic-3d-hover-effect\/","title":{"rendered":"FUTURISTIC 3D HOVER EFFECT"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><u><em>Author:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>Jouan Marcel<\/li><li>September 5, 2018<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>Made with:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS (SCSS)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>About the code:<\/em><\/u><\/strong><\/h4>\n\n\n\n<p>This is an amazing and cool Hover Effect Example which is usable as navigation, menu or effect. It uses CSS\u00a0<code>transform<\/code>\u00a0and perspective to create a unique hololens-like animation effect. Can be used for many more use cases, you will probably have your own ideas. This is an experimental idea, you may want to flesh it out for use in production.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> No<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/jouanmarcel\/share\/zip\/NLgVjm\" 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\n\n<a href=\"https:\/\/codepen.io\/jouanmarcel\/pen\/NLgVjm\" 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 and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Jouan Marcel September 5, 2018 Made with: HTML \/ CSS (SCSS) About the code: This is an amazing and cool Hover Effect Example which is usable as navigation, menu or effect. It uses CSS\u00a0transform\u00a0and perspective to create a unique hololens-like animation effect. Can be used for many more use cases, you will probably have your own ideas. This is an experimental idea, you may want to flesh it out for use in production. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: No Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":16365,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2041],"tags":[20,2044,2042,4732],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/16364"}],"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=16364"}],"version-history":[{"count":3,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/16364\/revisions"}],"predecessor-version":[{"id":23890,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/16364\/revisions\/23890"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/16365"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=16364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=16364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=16364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}