{"id":1033,"date":"2012-07-02T11:06:52","date_gmt":"2012-07-02T11:06:52","guid":{"rendered":"http:\/\/congnghepc.com\/2012\/07\/02\/hieu-ung-hover-3d-tuyet-dep-css3\/"},"modified":"2019-12-26T10:31:23","modified_gmt":"2019-12-26T10:31:23","slug":"hieu-ung-hover-3d-tuyet-dep-css3","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/hieu-ung-hover-3d-tuyet-dep-css3\/","title":{"rendered":"Hi\u1ec7u \u1ee9ng Hover 3D tuy\u1ec7t \u0111\u1eb9p &#8211; CSS 3"},"content":{"rendered":"<p>T\u1ea1o trang HTML nh\u01b0 sau:<\/p>\n<pre>\t\n\n\t&lt;div id=\"grid\" class=\"main\"&gt;\n\t&nbsp;&nbsp;&nbsp; &lt;div class=\"view\"&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"view-back\"&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span data-icon=\"A\"&gt;566&lt;\/span&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span data-icon=\"B\"&gt;124&lt;\/span&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=\"http:\/\/www.flickr.com\/photos\/ag2r\/5439506585\/in\/photostream\"&gt;\u2192&lt;\/a&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src=\"images\/1.jpg\" \/&gt;\n\n\t&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\t&nbsp;&nbsp;&nbsp; &lt;div class=\"view\"&gt;\n\t&nbsp;&nbsp;&nbsp; &lt;!-- ... --&gt;\n\t&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\t&nbsp;&nbsp;&nbsp; &lt;!-- ... --&gt;\n\t&lt;\/div&gt;<\/pre>\n<p>Nh\u1eefng h\u00ecnh \u1ea3nh d\u00f9ng \u0111\u1ec3 s\u1eed d\u1ee5ng t\u1ea1o ra hi\u1ec7u \u1ee9ng. C\u1ea5u tr\u00fac \u0111\u01b0\u1ee3c th\u1ec3 hi\u1ec7n b\u1eb1ng jQuery nh\u01b0 sau:<\/p>\n<pre>\t&lt;div class=\"view\"&gt;\n\n\t&nbsp;&nbsp;&nbsp; &lt;div class=\"view-back\"&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- ... --&gt;\n\n\t&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n\n\t&nbsp;&nbsp;&nbsp; &lt;div class=\"slice s1\" style=\"background-image: url(images\/1.jpg); \"&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class=\"overlay\"&gt;&lt;\/span&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"slice s2\" style=\"background-image: url(images\/1.jpg); \"&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class=\"overlay\"&gt;&lt;\/span&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"slice s3\" style=\"background-image: url(images\/1.jpg); \"&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class=\"overlay\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"slice s4\" style=\"background-image: url(images\/1.jpg); \"&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class=\"overlay\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"slice s5\" style=\"background-image: url(images\/1.jpg); \"&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class=\"overlay\"&gt;&lt;\/span&gt;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&lt;!-- \/s5 --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&lt;!-- \/s4 --&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&lt;!-- \/s3 --&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&lt;!-- \/s2 --&gt;\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n\n\t&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&lt;!-- \/s1 --&gt;\n&nbsp;&nbsp; &nbsp;\n\n\t&lt;\/div&gt;&lt;!-- \/view --&gt;<\/pre>\n<p>Ch\u1ee9c n\u0103ng JaveScript nh\u01b0 sau:<\/p>\n<pre>\t$.fn.hoverfold = function( args ) {\n\n\t&nbsp;&nbsp;&nbsp; this.each( function() {\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $( this ).children( '.view' ).each( function() {\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var $item&nbsp;&nbsp; = $( this ),\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img&nbsp;&nbsp;&nbsp;&nbsp; = $item.children( 'img' ).attr( 'src' ),\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; = '&lt;div class=\"slice s1\"&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;div class=\"slice s2\"&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;div class=\"slice s3\"&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;div class=\"slice s4\"&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;div class=\"slice s5\"&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;\/div&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;\/div&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;\/div&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;\/div&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; struct&nbsp; +='&lt;\/div&gt;';\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var $struct = $( struct );\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '&lt;span class=\"overlay\" &gt;&lt;\/span&gt;' ) );\n\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } );\n\n\t&nbsp;&nbsp;&nbsp; });\n\n\t};<\/pre>\n<p>&nbsp;<\/p>\n<p>B\u00e2y gi\u1edd ch\u00fang ta \u0111\u00e3 t\u1ea1o ra \u0111\u01b0\u1ee3c nh\u1eefng hi\u1ec7u \u1ee9ng Hover \u0111\u01a1n gi\u1ea3n.<\/p>\n<p>Ch\u00fang ta h\u00e3y trang \u0111i\u1ec3m cho c\u00e1c hi\u1ec7u \u1ee9ng \u0111\u1eb9p h\u01a1n b\u00e0ng CSS:<\/p>\n<pre>\t.view {\n\n\t&nbsp;&nbsp;&nbsp; width: 316px;\n\n\t&nbsp;&nbsp;&nbsp; height: 216px;\n\n\t&nbsp;&nbsp;&nbsp; margin: 10px;\n\n\t&nbsp;&nbsp;&nbsp; float: left;\n\n\t&nbsp;&nbsp;&nbsp; position: relative;\n\n\t&nbsp;&nbsp;&nbsp; border: 8px solid #fff;\n\n\t&nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px rgba(0,0,0,0.05);\n\n\t&nbsp;&nbsp;&nbsp; background: #333;\n\n\t&nbsp;&nbsp;&nbsp; perspective: 500px;\n\n\t}<\/pre>\n<p>Nh\u01b0ng hi\u1ec7u \u1ee9ng h\u00ecnh c\u1eaft nh\u01b0 sau:<\/p>\n<pre>\t.view .slice{\n\t&nbsp;&nbsp;&nbsp; width: 60px;\n\t&nbsp;&nbsp;&nbsp; height: 100%;\n\t&nbsp;&nbsp;&nbsp; z-index: 100;\n\t&nbsp;&nbsp;&nbsp; transform-style: preserve-3d;\n\t&nbsp;&nbsp;&nbsp; transform-origin: left center;\n\t&nbsp;&nbsp;&nbsp; transition: transform 150ms ease-in-out;\n&nbsp;\t}\n\n\t.view div.view-back{\n\t&nbsp;&nbsp;&nbsp; width: 50%;\n\t&nbsp;&nbsp;&nbsp; height: 100%;\n\t&nbsp;&nbsp;&nbsp; position: absolute;\n\t&nbsp;&nbsp;&nbsp; right: 0;\n\t&nbsp;&nbsp;&nbsp; background: #666;\n\t&nbsp;&nbsp;&nbsp; z-index: 0;\n\t}\n\n\t.view-back span {\n\t&nbsp;&nbsp;&nbsp; display: block;\n\t&nbsp;&nbsp;&nbsp; float: right;\n\t&nbsp;&nbsp;&nbsp; padding: 5px 20px 5px;\n\t&nbsp;&nbsp;&nbsp; width: 100%;\n\t&nbsp;&nbsp;&nbsp; text-align: right;\n\t&nbsp;&nbsp;&nbsp; font-size: 16px;\n\t&nbsp;&nbsp;&nbsp; color: rgba(255,255,255,0.6);\n\t}\n\n\t.view-back span:first-child {\n\t&nbsp;&nbsp;&nbsp; padding-top: 20px;\n\t}\n\n\t.view-back a {\n\t&nbsp;&nbsp;&nbsp; display: bock;\n\t&nbsp;&nbsp;&nbsp; font-size: 18px;\n\t&nbsp;&nbsp;&nbsp; color: rgba(255,255,255,0.4);\n\t&nbsp;&nbsp;&nbsp; position: absolute;\n\t&nbsp;&nbsp;&nbsp; right: 15px;\n\t&nbsp;&nbsp;&nbsp; bottom: 15px;\n\t&nbsp;&nbsp;&nbsp; border: 2px solid rgba(255,255,255,0.3);\n\t&nbsp;&nbsp;&nbsp; border-radius: 50%;\n\t&nbsp;&nbsp;&nbsp; width: 30px;\n\t&nbsp;&nbsp;&nbsp; height: 30px;\n\t&nbsp;&nbsp;&nbsp; line-height: 22px;\n\t&nbsp;&nbsp;&nbsp; text-align: center;\n\t&nbsp;&nbsp;&nbsp; font-weight: 700;\n\t}\n\n\t.view-back a:hover {\n\t&nbsp;&nbsp;&nbsp; color: #fff;\n\t&nbsp;&nbsp;  border-color: #fff;\n\t}\n\n\t.view-back span[data-icon]:before {\n\t&nbsp;&nbsp;&nbsp; content: attr(data-icon);\n\t&nbsp;&nbsp;&nbsp; font-family: 'icons';\n\t&nbsp;&nbsp;&nbsp; color: #aaa;\n\t&nbsp;&nbsp;&nbsp; color: rgba(255,255,255,0.2);\n\t&nbsp;&nbsp;&nbsp; text-shadow: 0 0 1px rgba(255,255,255,0.2);\n\t&nbsp;&nbsp;&nbsp; padding-right: 5px;\n\t}\n\n\t.view .s2,\n\t.view .s3,\n\t.view .s4,\n\t.view .s5 {\n\t&nbsp;&nbsp;&nbsp; transform: translateX(60px);\n\t}\n\n\t.view .s1 {\n\t&nbsp;&nbsp;&nbsp; background-position: 0px 0px;\n\t}\n\n\t.view .s2 {\n        &nbsp;&nbsp;&nbsp; background-position: -60px 0px;\n\t}\n\n\t.view .s3 {\n\t&nbsp;&nbsp;&nbsp; background-position: -120px 0px;\n\t}\n\n\t.view .s4 {\n\t&nbsp;&nbsp;&nbsp; background-position: -180px 0px;\n\t}\n\n\t.view .s5 {\n\t&nbsp;&nbsp;&nbsp; background-position: -240px 0px;\n\t}\n\n\t.view .overlay {\n\t&nbsp;&nbsp;&nbsp; width: 60px;\n\t&nbsp;&nbsp;&nbsp; height: 100%;\n\t&nbsp;&nbsp;&nbsp; opacity: 0;\n\t&nbsp;&nbsp;&nbsp; position: absolute;\n\t&nbsp;&nbsp;&nbsp; transition: opacity 150ms ease-in-out;\n\t}\n\n\t.view:hover .overlay {\n\t&nbsp;&nbsp;&nbsp; opacity: 1;\n\t}\n\n\t.view img {\n\t&nbsp;&nbsp;&nbsp; position: absolute;\n\t&nbsp;&nbsp;&nbsp; z-index: 0;\n        &nbsp;&nbsp;&nbsp; transition: left 0.3s ease-in-out;\n\t}\n\n\t.view {\n\t&nbsp;&nbsp;&nbsp; overflow: hidden;\n\t}\n\n\t.view:hover img {\n\t&nbsp;&nbsp;&nbsp; left: -85px;\n\t}\n\n\t.view div.view-back {\n\t&nbsp;&nbsp;&nbsp; background: #666;\n\t}<\/pre>\n<p><a href=\"https:\/\/dl.dropbox.com\/u\/1552467\/pctips\/2012\/07\/hieu-ung-hover-3d-tuyet-dep-css3\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Demo<\/a> | <a href=\"http:\/\/tympanus.net\/Tutorials\/3DHoverEffects\/3DHoverEffects.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Download<\/a><\/p>\n<p style=\"text-align: right;\">\n\t<strong><em>D\u1ecbch t\u1eeb: <a href=\"http:\/\/tympanus.net\" target=\"_blank\" rel=\"noopener noreferrer\">Tympanus<\/a> <\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong b&agrave;i h\u01b0\u1edbng d\u1eabn n&agrave;y, c&aacute;c b\u1ea1n s\u1ebd h\u1ecdc \u0111\u01b0\u1ee3c c&aacute;ch t\u1ea1o ra hi\u1ec7u \u1ee9ng 3D khi Hover v&agrave;o \u1ea3nh b\u1eb1ng CSS v&agrave; jQuery. &Yacute; t\u01b0\u1edfng n&agrave;y \u0111\u01b0\u1ee3c l\u1ea5y c\u1ea3m h\u1ee9ng b\u1edfi hi\u1ec7u \u1ee9ng hover chu\u1ed9t tren trang Showcase Google SketchUp.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[],"class_list":["post-1033","post","type-post","status-publish","format-standard","hentry","category-thu-thuat-jquery"],"views":534,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=1033"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1033\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=1033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=1033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=1033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}