{"id":5274,"date":"2016-05-03T02:44:50","date_gmt":"2016-05-03T02:44:50","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=5274"},"modified":"2023-08-07T08:21:24","modified_gmt":"2023-08-07T01:21:24","slug":"huong-dan-tao-hieu-ung-xoay-tron-hinh-anh-trong-blogger","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/huong-dan-tao-hieu-ung-xoay-tron-hinh-anh-trong-blogger\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn t\u1ea1o hi\u1ec7u \u1ee9ng xoay tr\u00f2n h\u00ecnh \u1ea3nh trong blogger"},"content":{"rendered":"\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y ch\u00fang t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n t\u1ea1o hi\u1ec7u \u1ee9ng xoay tr\u00f2n h\u00ecnh \u1ea3nh b\u1eb1ng CSS3 cho Blogger \u0111\u01a1n gi\u1ea3n. Xin gi\u1ea3i th\u00edch th\u00eam, khi \u00e1p d\u1ee5ng th\u1ee7 thu\u1eadt n\u00e0y, h\u00ecnh \u1ea3nh xoay 1 v\u00f2ng, chuy\u1ec3n th\u00e0nh h\u00ecnh tr\u00f2n n\u1ebfu \u0111\u1ed9c gi\u1ea3 r\u00ea chu\u1ed9t kh\u00e1 \u0111\u1eb9p m\u1eaft.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>B\u1ea3n ch\u1ea5t hi\u1ec7u \u1ee9ng l\u00e0 s\u1eed d\u1ee5ng CSS3 t\u1ea1o hi\u1ec7u \u1ee9ng xoay tr\u00f2n \u1ea3nh v\u00e0 hi\u1ec7u \u1ee9ng bo tr\u00f2n \u1ea3nh n\u00ean s\u1ebd ko l\u00e0m gi\u1ea3m t\u1ed1c \u0111\u1ed9 Blog.<\/p>\n\n\n\n<p>\u0110\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng xoay tr\u00f2n \u1ea3nh Blogger, \u0111\u1ea7u ti\u00ean c\u1ea7n \u00e1p d\u1ee5ng m\u00e3 CSS3 b\u1eb1ng th\u00eam \u0111o\u1ea1n code v\u00e0o tr\u01b0\u1edbc th\u1ebb ]]&gt;<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.morph img {\n    border:25px solid #158aee;\n    -webkit-transition: all 1s ease;\n    -moz-transition: all 1s ease;\n    -o-transition: all 1s ease;\n    -ms-transition: all 1s ease;\n    transition: all 1s ease;\n  }\n  .morph img:hover {\n    border:25px solid #158aee;\n    border-radius: 250px;\n    -webkit-transform: rotate(360deg);\n    -moz-transform: rotate(360deg);\n    -o-transform: rotate(360deg);\n    -ms-transform: rotate(360deg);\n    transform: rotate(360deg);\n    margin: 0;\n    padding: 0;\n    margin-bottom:0px;\n    overflow:hidden;\n  }\n<\/pre>\n\n\n\n<p>Trong \u0111\u00f3 :<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">border:25px solid #158aee;<\/pre>\n\n\n\n<p>L\u00e0 vi\u1ec1n tr\u01b0\u1edbc r\u00ea chu\u1ed9t v\u1edbi<\/p>\n\n\n\n<p>25px: k\u00edch th\u01b0\u1edbc vi\u1ec1n<br>#158aee: m\u00e0u \u0111\u01b0\u1eddng vi\u1ec1n<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 x\u00f3a \u0111i n\u1ebfu kh\u00f4ng c\u1ea7n thi\u1ebft<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">border:25px solid #158aee;<\/pre>\n\n\n\n<p>L\u00e0 vi\u1ec1n sau khi r\u00ea chu\u1ed9t v\u00e0o. C\u00e1i n\u00e0y t\u01b0\u01a1ng t\u1ef1 nh\u01b0 tr\u00ean.<\/p>\n\n\n\n<p>Ti\u1ebfp theo, th\u00eam \u1ea3nh c\u00f3 hi\u1ec7u \u1ee9ng v\u00e0o b\u00e0i vi\u1ebft b\u1ea5t c\u1ee9 ch\u1ed7 n\u00e0o, ch\u1ec9 c\u1ea7n th\u00eam m\u00e3 sau v\u00e0o. L\u01b0u \u00fd th\u00eam v\u00e0o b\u00e0i vi\u1ebft ph\u1ea3i sang ch\u1ebf \u0111\u1ed9 HTML<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;morph pic&quot;&gt;\n  &lt;img alt=&quot;morph hover effect&quot; src=&quot;http:\/\/1.bp.blogspot.com\/-H0SVTqiQX9A\/Uf-_3xUp7aI\/AAAAAAAABew\/GE1y6X3oieE\/s1600\/morph.png&quot; \/&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Trong \u0111\u00f3 http:\/\/1.bp.blogspot.com\/-H0SVTqiQX9A\/Uf-_3xUp7aI\/AAAAAAAABew\/GE1y6X3oieE\/s1600\/morph.png: link \u1ea3nh \u00e1p d\u1ee5ng hi\u1ec7u \u1ee9ng<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y ch\u00fang t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n t\u1ea1o hi\u1ec7u \u1ee9ng xoay tr\u00f2n h\u00ecnh \u1ea3nh b\u1eb1ng CSS3 cho [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":7942,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[170],"tags":[],"class_list":["post-5274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogger"],"views":524,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5274","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=5274"}],"version-history":[{"count":14,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5274\/revisions"}],"predecessor-version":[{"id":8011,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5274\/revisions\/8011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/7942"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=5274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=5274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=5274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}