{"id":75653,"date":"2024-07-21T22:08:57","date_gmt":"2024-07-21T15:08:57","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=75653"},"modified":"2024-07-21T22:08:57","modified_gmt":"2024-07-21T15:08:57","slug":"transform-css-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/","title":{"rendered":"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Transform_CSS_la_gi\" >Transform CSS l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Cu_phap_va_cac_gia_tri_thuoc_tinh_transform_CSS\" >C\u00fa ph\u00e1p v\u00e0 c\u00e1c gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh transform CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Cach_chuyen_doi_phan_tu_2D_2D_Transform_CSS\" >C\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D (2D Transform CSS)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Cach_chuyen_doi_phan_tu_3D_3D_Transform_CSS\" >C\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 3D (3D Transform CSS)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Thuoc_tinh_transform-origin_CSS\" >Thu\u1ed9c t\u00ednh transform-origin CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Nhung_luu_y_can_biet_khi_su_dung_transform_CSS\" >Nh\u1eefng l\u01b0u \u00fd c\u1ea7n bi\u1ebft khi s\u1eed d\u1ee5ng transform CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Cac_cau_hoi_thuong_gap_ve_Transform_CSS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Transform CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>CSS mang \u0111\u1ebfn cho b\u1ea1n h\u00e0ng lo\u1ea1t t\u00ednh n\u0103ng \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t trang web m\u1edbi m\u1ebb v\u00e0 \u1ea5n t\u01b0\u1ee3ng. Ngo\u00e0i t\u00f4 n\u1ec1n (background), t\u1ea1o b\u00f3ng \u0111\u1ed5 (box shadow), t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n (border), c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang c\u00f2n c\u00f3 th\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed, k\u00edch th\u01b0\u1edbc, c\u00e1ch hi\u1ec3n th\u1ecb v\u1edbi thu\u1ed9c t\u00ednh transform CSS. Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec s\u1ebd \u0111\u01b0a ra nh\u1eefng h\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D v\u1edbi transform CSS.<\/strong><\/em><\/p>\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u1ec3 hi\u1ec3u r\u00f5:<\/p>\n<ul>\n<li>Transform CSS l\u00e0 g\u00ec<\/li>\n<li>H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1c c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D v\u1edbi transform CSS<\/li>\n<li>Nh\u1eefng l\u01b0u \u00fd c\u1ea7n bi\u1ebft khi \u00e1p d\u1ee5ng transform CSS<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Transform_CSS_la_gi\"><\/span><b>Transform CSS l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hai thu\u1ed9c t\u00ednh ch\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c bi\u1ebfn \u0111\u1ed5i c\u00e1c ph\u1ea7n t\u1eed g\u1ed3m transform (c\u00e1c thu\u1ed9c t\u00ednh translate, rotate v\u00e0 scale) v\u00e0 transform-origin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Transform CSS l\u00e0 m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c thu\u1ed9c t\u00ednh trong CSS3 cho ph\u00e9p b\u1ea1n <\/span><b>thay \u0111\u1ed5i v\u1ecb tr\u00ed, h\u00ecnh d\u1ea1ng v\u00e0 xoay<\/b><span style=\"font-weight: 400;\"> c\u00e1c ph\u1ea7n t\u1eed HTML theo nhi\u1ec1u h\u01b0\u1edbng kh\u00e1c nhau. T\u1eeb \u0111\u00f3 t\u1ea1o ra c\u00e1c hi\u1ec7u \u1ee9ng \u0111\u1eb9p m\u1eaft v\u00e0 m\u01b0\u1ee3t m\u00e0 m\u00e0 kh\u00f4ng c\u1ea7n s\u1eed d\u1ee5ng JavaScript. Transform CSS ho\u1ea1t \u0111\u1ed9ng b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i coordinate space c\u1ee7a ph\u1ea7n t\u1eed, thay v\u00ec thay \u0111\u1ed5i v\u1ecb tr\u00ed th\u1ef1c t\u1ebf c\u1ee7a ph\u1ea7n t\u1eed trong t\u00e0i li\u1ec7u HTML.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Transform CSS c\u00f3 hai lo\u1ea1i ch\u00ednh l\u00e0 transform 2D v\u00e0 transform 3D.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Transform 2D:<\/b><span style=\"font-weight: 400;\"> D\u00f9ng \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c hi\u1ec7u \u1ee9ng di chuy\u1ec3n 2D c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed tr\u00ean website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Transform 3D:<\/b><span style=\"font-weight: 400;\"> Cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u1ef1 transform 2D nh\u01b0ng \u00e1p d\u1ee5ng cho kh\u00f4ng gian 3 chi\u1ec1u \u0111\u1ec3 t\u1ea1o ra c\u00e1c hi\u1ec7u \u1ee9ng 3D ph\u1ee9c t\u1ea1p h\u01a1n.<\/span><\/li>\n<\/ul>\n<p><b>Transform-origin <\/b><span style=\"font-weight: 400;\">l\u00e0 thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh \u0111i\u1ec3m neo cho c\u00e1c ph\u00e9p bi\u1ebfn \u0111\u1ed5i CSS nh\u01b0 xoay, di chuy\u1ec3n v\u00e0 thay \u0111\u1ed5i t\u1ef7 l\u1ec7 n\u00eau tr\u00ean. \u0110i\u1ec3m neo n\u00e0y x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed tr\u00ean m\u1ed9t ph\u1ea7n t\u1eed m\u00e0 ph\u00e9p bi\u1ebfn \u0111\u1ed5i s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cu_phap_va_cac_gia_tri_thuoc_tinh_transform_CSS\"><\/span><b>C\u00fa ph\u00e1p v\u00e0 c\u00e1c gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh transform CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>transform: none | transform-functions | initial | inherit;<\/b><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Gi\u00e1 tr\u1ecb<\/b><\/td>\n<td><b>M\u00f4 t\u1ea3<\/b><\/td>\n<td><b>V\u00ed d\u1ee5<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>none<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed kh\u00f4ng c\u00f3 s\u1ef1 chuy\u1ec3n \u0111\u1ed5i<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: none;<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75878\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-1-vippro.png\" alt=\"\" width=\"944\" height=\"371\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-1-vippro.png 944w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-1-vippro-300x118.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-1-vippro-700x275.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-1-vippro-200x79.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-1-vippro-100x39.png 100w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/span><\/i><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><b>transform-functions<\/b><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><b>matrix(n,n,n,n,n,n)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh ph\u00e9p bi\u1ebfn \u0111\u1ed5i 2D, s\u1eed d\u1ee5ng ma tr\u1eadn g\u1ed3m s\u00e1u gi\u00e1 tr\u1ecb.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: matrix(0.586,0.8,-0.8,0.586,40,30);<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75879\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-2-vippro.png\" alt=\"transform css matrix - itviec blog\" width=\"945\" height=\"401\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-2-vippro.png 945w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-2-vippro-300x127.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-2-vippro-700x297.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-2-vippro-200x85.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-2-vippro-100x42.png 100w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>matrix3d<\/b><\/p>\n<p><b>(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh ph\u00e9p bi\u1ebfn \u0111\u1ed5i 3D, s\u1eed d\u1ee5ng ma tr\u1eadn 4&#215;4 g\u1ed3m 16 gi\u00e1 tr\u1ecb.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: matrix3d( 0.5, 0, -0.866025, 0, 0.595877, 1.2,\u00a0 \u00a0 -1.03209, 0, 0.866025, \u00a0 0, 0.5, 0, 25.9808, 0,\u00a0 \u00a0 \u00a0 15, 1);\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75880\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-3-vippro.png\" alt=\"transform css matrix3d - itviec blog\" width=\"941\" height=\"399\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-3-vippro.png 941w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-3-vippro-300x127.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-3-vippro-700x297.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-3-vippro-200x85.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-3-vippro-100x42.png 100w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>translate(x,y)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed 2D theo tr\u1ee5c ngang v\u00e0 d\u1ecdc.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: translate(50px,100px);<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75881\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-4-vippro.png\" alt=\"transform css translate - itviec blog\" width=\"948\" height=\"361\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-4-vippro.png 948w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-4-vippro-300x114.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-4-vippro-700x267.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-4-vippro-200x76.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-4-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>translate3d(x,y,z)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed 3D theo tr\u1ee5c ngang v\u00e0 d\u1ecdc.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: translate3d(42px, -62px, -135px);<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75912\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-5-vippro.png\" alt=\"transform css translate 3d - itviec blog\" width=\"942\" height=\"411\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-5-vippro.png 942w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-5-vippro-300x131.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-5-vippro-700x305.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-5-vippro-200x87.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-5-vippro-100x44.png 100w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>translateX(x)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed 2D theo tr\u1ee5c ngang.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: translateX(50px);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75926\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro.png\" alt=\"transform css translatex - itviec blog\" width=\"945\" height=\"698\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro.png 945w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro-300x222.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro-768x567.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro-200x148.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro-100x74.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-6-vippro-609x450.png 609w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>translateY(y)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed 2D theo tr\u1ee5c d\u1ecdc.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: translateY(100px);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75925\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro.png\" alt=\"transform css translatey - itviec blog\" width=\"931\" height=\"728\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro.png 931w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro-300x235.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro-768x601.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro-200x156.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro-100x78.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-7-vippro-575x450.png 575w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>translateZ(z)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed theo tr\u1ee5c nghi\u00eang.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: translateZ(-3ch);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75924\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-8-vippro.png\" alt=\"transform css translatez - itviec blog\" width=\"492\" height=\"499\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-8-vippro.png 492w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-8-vippro-296x300.png 296w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-8-vippro-197x200.png 197w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-8-vippro-100x100.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-8-vippro-444x450.png 444w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>scale(x,y)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed 2D theo chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: scale(2,2);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75923\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-9-vippro.png\" alt=\"transform css scale - itviec blog\" width=\"950\" height=\"663\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-9-vippro.png 950w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-9-vippro-300x209.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-9-vippro-645x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-9-vippro-200x140.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-9-vippro-100x70.png 100w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>scale3d(x,y,z)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed 3D theo chi\u1ec1u ngang, chi\u1ec1u d\u1ecdc v\u00e0 g\u00f3c x\u00e9o.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: scale3d(1.3, 1.3, 1.3);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75922\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-10-vippro.png\" alt=\"transform css scale 3d - itviec blog\" width=\"1021\" height=\"589\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-10-vippro.png 1021w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-10-vippro-300x173.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-10-vippro-700x404.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-10-vippro-200x115.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-10-vippro-100x58.png 100w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>scaleX(x)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed 2D theo chi\u1ec1u ngang.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: scaleX(20deg); v\u00e0 transform: scaleX(-20deg);<\/span><\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/BNGMRy\/cb9ab0a908241806e3eff88b57f15693\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Xem source minh ho\u1ea1<\/span><\/i><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><b>scaleY(y)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed 2D theo chi\u1ec1u d\u1ecdc.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: scaleY(20deg); v\u00e0 transform: scaleY(-20deg);<\/span><\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/jPQpzp\/d7be823bca05649502f63fc8490c6d93\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Xem source minh ho\u1ea1<\/span><\/i><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><b>scaleZ(z)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed 2D theo tr\u1ee5c Z.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: scaleZ(1);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75921\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-11-vippro.png\" alt=\"transform css scalez - itviec blog\" width=\"1017\" height=\"588\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-11-vippro.png 1017w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-11-vippro-300x173.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-11-vippro-700x405.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-11-vippro-200x116.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-11-vippro-100x58.png 100w\" sizes=\"auto, (max-width: 1017px) 100vw, 1017px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>rotate(angel)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Quay ph\u1ea7n t\u1eed 2D theo g\u00f3c \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh trong c\u00e2u l\u1ec7nh.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: rotate(10deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75920\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-12-vippro.png\" alt=\"transform css rotate - itviec blog\" width=\"942\" height=\"628\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-12-vippro.png 942w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-12-vippro-300x200.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-12-vippro-675x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-12-vippro-200x133.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-12-vippro-100x67.png 100w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>rotate3d(x,y,z,angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Quay ph\u1ea7n t\u1eed 3D theo g\u00f3c \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh trong c\u00e2u l\u1ec7nh.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: rotate3d(1, 1, 1, 45deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75919\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-13-vippro.jpg\" alt=\"transform css rotate 3d - itviec blog\" width=\"1496\" height=\"743\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-13-vippro.jpg 1496w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-13-vippro-300x149.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-13-vippro-700x348.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-13-vippro-200x99.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-13-vippro-100x50.jpg 100w\" sizes=\"auto, (max-width: 1496px) 100vw, 1496px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>rotateX(angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Quay ph\u1ea7n t\u1eed theo g\u00f3c \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh tr\u00ean tr\u1ee5c X.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: rotateX(45deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75918\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-14-vippro.png\" alt=\"transform css rotatex - itviec blog\" width=\"950\" height=\"558\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-14-vippro.png 950w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-14-vippro-300x176.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-14-vippro-700x411.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-14-vippro-200x117.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-14-vippro-100x59.png 100w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>rotateY(angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Quay ph\u1ea7n t\u1eed theo g\u00f3c \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh tr\u00ean tr\u1ee5c Y.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: rotateY(45deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75917\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-15-vippro.png\" alt=\"transform css rotatey - itviec blog\" width=\"953\" height=\"631\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-15-vippro.png 953w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-15-vippro-300x199.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-15-vippro-680x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-15-vippro-200x132.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-15-vippro-100x66.png 100w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>rotateZ(angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Quay ph\u1ea7n t\u1eed theo g\u00f3c \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh tr\u00ean tr\u1ee5c Z.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: rotateZ(0deg); v\u00e0<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: rotateZ(100deg)<\/span><\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/MwzBzR\/ebb6b5a5cec86aa04168f03e26c7501c\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Xem source minh ho\u1ea1<\/span><\/i><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><b>skew(x-angle,y-angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">\u0110i\u1ec1u ch\u1ec9nh \u0111\u1ed9 nghi\u00eang c\u1ee7a ph\u1ea7n t\u1eed theo tr\u1ee5c X v\u00e0 tr\u1ee5c Y.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: skew(30deg,30deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75916\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-16-vippro.png\" alt=\"transform css skew - itviec blog\" width=\"948\" height=\"651\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-16-vippro.png 948w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-16-vippro-300x206.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-16-vippro-655x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-16-vippro-200x137.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-16-vippro-100x69.png 100w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>skewX(angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">\u0110i\u1ec1u ch\u1ec9nh \u0111\u1ed9 nghi\u00eang c\u1ee7a ph\u1ea7n t\u1eed theo tr\u1ee5c X.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: skewX(30deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75915\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-17-vippro.png\" alt=\"transform css skewx - itviec blog\" width=\"942\" height=\"633\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-17-vippro.png 942w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-17-vippro-300x202.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-17-vippro-670x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-17-vippro-200x134.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-17-vippro-100x67.png 100w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>skewY(angle)\u00a0<\/b><\/td>\n<td><span style=\"font-weight: 400;\">\u0110i\u1ec1u ch\u1ec9nh \u0111\u1ed9 nghi\u00eang c\u1ee7a ph\u1ea7n t\u1eed theo tr\u1ee5c Y.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: skewY(30deg);<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75914\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-18-vippro.png\" alt=\"transform css skewy - itviec blog\" width=\"947\" height=\"652\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-18-vippro.png 947w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-18-vippro-300x207.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-18-vippro-654x450.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-18-vippro-200x138.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-18-vippro-100x69.png 100w\" sizes=\"auto, (max-width: 947px) 100vw, 947px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>perspective(n)<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u1ed1i c\u1ea3nh c\u00e1c ph\u01b0\u01a1ng th\u1ee9c transform CSS b\u00ean tr\u00ean.<\/span><\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\"> perspective: 800px;<\/span><i><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75913\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-19-vippro.png\" alt=\"transform css perspective - itviec blog\" width=\"1489\" height=\"752\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-19-vippro.png 1489w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-19-vippro-300x152.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-19-vippro-700x354.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-19-vippro-200x101.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-19-vippro-100x51.png 100w\" sizes=\"auto, (max-width: 1489px) 100vw, 1489px\" \/><\/td>\n<\/tr>\n<tr>\n<td><b>initial<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh v\u1ec1 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh.<\/span><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><b>inherit<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh theo gi\u00e1 tr\u1ecb c\u1ee7a ph\u1ea7n t\u1eed cha.<\/span><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Cach_chuyen_doi_phan_tu_2D_2D_Transform_CSS\"><\/span><b>C\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D (2D Transform CSS)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u00e1c ph\u00e9p bi\u1ebfn \u0111\u1ed5i CSS hai chi\u1ec1u ho\u1ea1t \u0111\u1ed9ng tr\u00ean tr\u1ee5c X (ngang) v\u00e0 Y (d\u1ecdc).<\/span><\/p>\n<h3><b>Transform CSS: Translate<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng th\u1ee9c translate() d\u1ecbch chuy\u1ec3n (ho\u1eb7c di chuy\u1ec3n) m\u1ed9t ph\u1ea7n t\u1eed trang l\u00ean, xu\u1ed1ng, tr\u00e1i v\u00e0\/ho\u1eb7c ph\u1ea3i tr\u00ean trang theo kho\u1ea3ng c\u00e1ch \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. Trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n, s\u1ed1 \u0111\u1ea7u ti\u00ean ch\u1ec9 \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch theo chi\u1ec1u ngang, s\u1ed1 th\u1ee9 hai ch\u1ec9 \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch theo chi\u1ec1u d\u1ecdc.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre><b>transform: translate(x, y);<\/b><\/pre>\n<p><b>Trong \u0111\u00f3:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>x<\/b><span style=\"font-weight: 400;\">: Kho\u1ea3ng c\u00e1ch d\u1ecbch chuy\u1ec3n theo chi\u1ec1u ngang. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng di chuy\u1ec3n ph\u1ea7n t\u1eed sang ph\u1ea3i, gi\u00e1 tr\u1ecb \u00e2m di chuy\u1ec3n sang tr\u00e1i.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>y<\/b><span style=\"font-weight: 400;\">: Kho\u1ea3ng c\u00e1ch d\u1ecbch chuy\u1ec3n theo chi\u1ec1u d\u1ecdc. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng di chuy\u1ec3n ph\u1ea7n t\u1eed xu\u1ed1ng d\u01b0\u1edbi, gi\u00e1 tr\u1ecb \u00e2m di chuy\u1ec3n l\u00ean tr\u00ean.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb x v\u00e0 y c\u00f3 \u0111\u01a1n v\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 pixel, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c \u0111\u01a1n v\u1ecb kh\u00e1c nh\u01b0 em, % ho\u1eb7c rem.<\/span><\/p>\n<p><b>V\u00ed d\u1ee5<\/b><span style=\"font-weight: 400;\">: D\u1ecbch chuy\u1ec3n div c\u1ee7a m\u00ecnh theo m\u1ed9t s\u1ed1 pixel (d\u01b0\u01a1ng) c\u1ee5 th\u1ec3.\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><b>transform: translate(100px, 75px);<\/b><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3<\/b><b>: <\/b><span style=\"font-weight: 400;\">Div m\u00e0u cam \u0111\u00e3 \u0111\u01b0\u1ee3c d\u1ecbch chuy\u1ec3n sang ph\u1ea3i 100 pixel v\u00e0 xu\u1ed1ng d\u01b0\u1edbi 75 pixel.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75927\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-20-vippro.png\" alt=\"\" width=\"1395\" height=\"789\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-20-vippro.png 1395w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-20-vippro-300x170.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-20-vippro-700x396.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-20-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-20-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 1395px) 100vw, 1395px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5<\/b><span style=\"font-weight: 400;\">: D\u1ecbch chuy\u1ec3n div c\u1ee7a m\u00ecnh theo m\u1ed9t s\u1ed1 pixel(\u00e2m) c\u1ee5 th\u1ec3.\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><b>transform: translate(-100px, -75px);<\/b><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3:<\/b><span style=\"font-weight: 400;\"> Ph\u1ea7n t\u1eed div m\u00e0u cam s\u1ebd di chuy\u1ec3n sang tr\u00e1i 100 pixel v\u00e0 l\u00ean tr\u00ean 75 pixel.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ph\u1ea7n tr\u0103m \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh d\u1ecbch chuy\u1ec3n. Ph\u1ea7n tr\u0103m di chuy\u1ec3n ph\u1ea7n t\u1eed theo kho\u1ea3ng c\u00e1ch ngang t\u1ec9 l\u1ec7 v\u1edbi chi\u1ec1u r\u1ed9ng ho\u1eb7c kho\u1ea3ng c\u00e1ch d\u1ecdc t\u1ec9 l\u1ec7 v\u1edbi chi\u1ec1u cao c\u1ee7a n\u00f3.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75928\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-21-vippro.png\" alt=\"\" width=\"1394\" height=\"786\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-21-vippro.png 1394w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-21-vippro-300x169.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-21-vippro-700x395.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-21-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-21-vippro-100x56.png 100w\" sizes=\"auto, (max-width: 1394px) 100vw, 1394px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b><span style=\"font-weight: 400;\"> D\u1ecbch chuy\u1ec3n div theo t\u1ef7 l\u1ec7\u00a0 chi\u1ec1u cao v\u00e0 chi\u1ec1u d\u1ecdc c\u1ee5 th\u1ec3.\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><b>transform: translate(100%, 50%);<\/b><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3:<\/b><span style=\"font-weight: 400;\"> Ph\u1ea7n t\u1eed div m\u00e0u cam s\u1ebd d\u1ecbch chuy\u1ec3n theo 100% chi\u1ec1u r\u1ed9ng v\u00e0 50% chi\u1ec1u cao.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i translate(), ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c h\u00e0m translateX() v\u00e0 translateY(). Trong \u0111\u00f3, h\u00e0m translateX() ch\u1ec9 d\u1ecbch chuy\u1ec3n m\u1ed9t ph\u1ea7n t\u1eed theo chi\u1ec1u ngang v\u00e0 h\u00e0m translateY() d\u1ecbch chuy\u1ec3n m\u1ed9t ph\u1ea7n t\u1eed theo chi\u1ec1u d\u1ecdc. C\u1ea3 hai \u0111\u1ec1u ch\u1ec9 nh\u1eadn m\u1ed9t gi\u00e1 tr\u1ecb \u0111\u1ea7u v\u00e0o.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75929\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-22-vippro.png\" alt=\"\" width=\"1394\" height=\"788\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-22-vippro.png 1394w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-22-vippro-300x170.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-22-vippro-700x396.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-22-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-22-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 1394px) 100vw, 1394px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b> D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed div theo chi\u1ec1u ngang v\u1edbi translateX().<\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><b>transform: translateX(100px);<\/b><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3:<\/b><span style=\"font-weight: 400;\"> Ph\u1ea7n t\u1eed div m\u00e0u cam d\u1ecbch chuy\u1ec3n sang ngang 100px.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75930\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-23-vippro.png\" alt=\"\" width=\"1394\" height=\"786\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-23-vippro.png 1394w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-23-vippro-300x169.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-23-vippro-700x395.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-23-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-23-vippro-100x56.png 100w\" sizes=\"auto, (max-width: 1394px) 100vw, 1394px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5<\/b>: D\u1ecbch chuy\u1ec3n ph\u1ea7n t\u1eed div theo chi\u1ec1u d\u1ecdc v\u1edbi translateY().<\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><b>transform: translateY(100px);<\/b><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3:<\/b><span style=\"font-weight: 400;\"> Ph\u1ea7n t\u1eed div m\u00e0u cam d\u1ecbch chuy\u1ec3n sang d\u1ecdc 100px.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-76050\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-24-vippro.png\" alt=\"transform css - itviec blog\" width=\"1390\" height=\"786\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-24-vippro.png 1390w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-24-vippro-300x170.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-24-vippro-700x396.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-24-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-24-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 1390px) 100vw, 1390px\" \/><\/p>\n<h3><b>Transform CSS: Scale<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng th\u1ee9c scale() c\u00f3 ch\u1ee9c n\u0103ng thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed m\u1ee5c ti\u00eau. N\u1ebfu cung c\u1ea5p m\u1ed9t \u0111\u1ed1i s\u1ed1 cho scale(), b\u1ea1n c\u00f3 th\u1ec3 ph\u00f3ng to ho\u1eb7c thu nh\u1ecf k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed theo m\u1ed9t b\u1ed9i s\u1ed1 c\u1ee7a k\u00edch th\u01b0\u1edbc ban \u0111\u1ea7u.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:\u00a0<\/b><\/p>\n<pre><b>transform: scale(x,y);<\/b><\/pre>\n<p><b>Trong \u0111\u00f3:\u00a0<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>X<\/b><span style=\"font-weight: 400;\">: T\u1ef7 l\u1ec7 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc theo chi\u1ec1u ngang. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng ph\u00f3ng to ph\u1ea7n t\u1eed, gi\u00e1 tr\u1ecb \u00e2m thu nh\u1ecf ph\u1ea7n t\u1eed.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Y<\/b><span style=\"font-weight: 400;\">: T\u1ef7 l\u1ec7 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc theo chi\u1ec1u d\u1ecdc. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng ph\u00f3ng to ph\u1ea7n t\u1eed, gi\u00e1 tr\u1ecb \u00e2m thu nh\u1ecf ph\u1ea7n t\u1eed.<\/span><\/li>\n<\/ul>\n<p><b>L\u01b0u \u00fd:<\/b><span style=\"font-weight: 400;\"> Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 1, ngh\u0129a l\u00e0 kh\u00f4ng thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc.<\/span><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b><span style=\"font-weight: 400;\"> Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed div v\u1edbi transform: scale(x,y).<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: scale(3, 1.5);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3:<\/b><span style=\"font-weight: 400;\"> K\u00edch th\u01b0\u1edbc c\u1ee7a div m\u00e0u cam s\u1ebd t\u0103ng l\u00ean 3 l\u1ea7n theo chi\u1ec1u ngang v\u00e0 1.5 l\u1ea7n theo chi\u1ec1u d\u1ecdc so v\u1edbi ban \u0111\u1ea7u.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9t gi\u00e1 tr\u1ecb cho c\u1ea3 x v\u00e0 y \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed theo t\u1ef7 l\u1ec7 \u0111\u1ed3ng \u0111\u1ec1u.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75931\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-25-vippro.png\" alt=\"\" width=\"1391\" height=\"783\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-25-vippro.png 1391w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-25-vippro-300x169.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-25-vippro-700x394.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-25-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-25-vippro-100x56.png 100w\" sizes=\"auto, (max-width: 1391px) 100vw, 1391px\" \/>\u00a0<\/span><\/p>\n<p><b>V\u00ed d\u1ee5<\/b><span style=\"font-weight: 400;\">: Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed div v\u1edbi transform: scale(2);<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: scale(2);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\"><strong>K\u1ebft qu\u1ea3:<\/strong> Ph\u1ea7n t\u1eed div s\u1ebd ph\u00f3ng to 2 l\u1ea7n c\u1ea3 chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75932\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-26-vippro.png\" alt=\"\" width=\"1389\" height=\"783\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-26-vippro.png 1389w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-26-vippro-300x169.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-26-vippro-700x395.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-26-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-26-vippro-100x56.png 100w\" sizes=\"auto, (max-width: 1389px) 100vw, 1389px\" \/><\/p>\n<p><strong>V\u00ed d\u1ee5: <\/strong><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed div v\u1edbi transform: scale(0.75);<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: scale(0.75);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3: <\/b><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed div s\u1ebd ph\u00f3ng to 0.75 l\u1ea7n c\u1ea3 chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng scaleX() v\u00e0 scaleY() \u0111\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed. Trong \u0111\u00f3, scaleX() thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed theo chi\u1ec1u ngang, scaleY() thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed theo chi\u1ec1u d\u1ecdc.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75933\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-27-vippro.png\" alt=\"\" width=\"1385\" height=\"785\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-27-vippro.png 1385w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-27-vippro-300x170.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-27-vippro-700x397.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-27-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-27-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 1385px) 100vw, 1385px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b><span style=\"font-weight: 400;\"> Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed div v\u1edbi transform: scaleX(2);<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: scaleX(2);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\"><strong>K\u1ebft qu\u1ea3:<\/strong> Ph\u1ea7n t\u1eed div cam s\u1ebd t\u0103ng k\u00edch th\u01b0\u1edbc g\u1ea5p 2 l\u1ea7n theo chi\u1ec1u ngang so v\u1edbi ban \u0111\u1ea7u.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75934\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-28-vippro.png\" alt=\"\" width=\"1386\" height=\"786\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-28-vippro.png 1386w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-28-vippro-300x170.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-28-vippro-700x397.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-28-vippro-200x113.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-28-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 1386px) 100vw, 1386px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b><span style=\"font-weight: 400;\"> Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed div v\u1edbi transform: scaleY(2);<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: scaleY(2);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><b>K\u1ebft qu\u1ea3:<\/b><span style=\"font-weight: 400;\"> Ph\u1ea7n t\u1eed div cam s\u1ebd t\u0103ng k\u00edch th\u01b0\u1edbc g\u1ea5p 2 l\u1ea7n theo chi\u1ec1u d\u1ecdc so v\u1edbi ban \u0111\u1ea7u.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75935\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-29-vippro.png\" alt=\"\" width=\"1391\" height=\"794\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-29-vippro.png 1391w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-29-vippro-300x171.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-29-vippro-700x400.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-29-vippro-200x114.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-29-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 1391px) 100vw, 1391px\" \/><\/p>\n<h3><b>Transform CSS: Rotate<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng th\u1ee9c rotate() d\u00f9ng \u0111\u1ec3 xoay m\u1ed9t ph\u1ea7n t\u1eed tr\u00ean trang. Theo m\u1eb7c \u0111\u1ecbnh, ph\u1ea7n t\u1eed s\u1ebd xoay quanh t\u00e2m c\u1ee7a n\u00f3. <\/span><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u1ec3 thay \u0111\u1ed5i \u0111i\u1ec3m neo cho ph\u00e9p xoay n\u00e0y v\u1edbi thu\u1ed9c t\u00ednh transform-origin.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre><b>transform: rotate(angle);<\/b><\/pre>\n<p><b>Trong \u0111\u00f3: <\/b><span style=\"font-weight: 400;\">angle (g\u00f3c xoay) c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng \u0111\u1ed9 (degrees), radian (radians) ho\u1eb7c s\u1ed1 v\u00f2ng xoay (turns). Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng xoay theo chi\u1ec1u kim \u0111\u1ed3ng h\u1ed3, gi\u00e1 tr\u1ecb \u00e2m xoay ng\u01b0\u1ee3c chi\u1ec1u kim \u0111\u1ed3ng h\u1ed3.<\/span><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b><span style=\"font-weight: 400;\"> C\u00e1ch thi\u1ebft l\u1eadp transform: rotate(angle); cho ph\u1ea7n t\u1eed div theo 3 \u0111\u01a1n v\u1ecb g\u00f3c (\u0111\u1ed9, radian v\u00e0 s\u1ed1 v\u00f2ng quay)<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;container&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-1&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-3&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-1 { transform: rotate(45deg); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-2 { transform: rotate(1.2rad); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-3 { transform: rotate(0.25turn); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.group {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 200px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original, .transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: green;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original { background-color: #213343; }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#container {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 25px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 25px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75936\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-30-vippro.png\" alt=\"\" width=\"1389\" height=\"654\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-30-vippro.png 1389w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-30-vippro-300x141.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-30-vippro-700x330.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-30-vippro-200x94.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-30-vippro-100x47.png 100w\" sizes=\"auto, (max-width: 1389px) 100vw, 1389px\" \/><\/p>\n<h3><b>Transform CSS: Skew<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng th\u1ee9c skew() th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 nghi\u00eang c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed tr\u00ean trang theo tr\u1ee5c X v\u00e0\/ho\u1eb7c Y. C\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ea7u v\u00e0o l\u1ea7n l\u01b0\u1ee3t ch\u1ec9 \u0111\u1ecbnh g\u00f3c nghi\u00eang theo chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc.<\/span><\/p>\n<p><b>C\u00fa ph\u00e1p:<\/b><\/p>\n<pre><b>transform: skew(x-angle,y-angle);<\/b><\/pre>\n<p><b>Trong \u0111\u00f3:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>X: <\/b><span style=\"font-weight: 400;\">G\u00f3c nghi\u00eang theo chi\u1ec1u ngang (tr\u1ee5c X). Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng nghi\u00eang ph\u1ea7n t\u1eed sang ph\u1ea3i, gi\u00e1 tr\u1ecb \u00e2m nghi\u00eang sang tr\u00e1i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Y<\/b><span style=\"font-weight: 400;\">: G\u00f3c nghi\u00eang theo chi\u1ec1u d\u1ecdc (tr\u1ee5c Y). Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng nghi\u00eang ph\u1ea7n t\u1eed xu\u1ed1ng d\u01b0\u1edbi, gi\u00e1 tr\u1ecb \u00e2m nghi\u00eang h\u01b0\u1edbng l\u00ean tr\u00ean.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><strong>V\u00ed d\u1ee5:<\/strong> Thi\u1ebft l\u1eadp ph\u1ea7n t\u1eed div v\u1edbi transform: skew(50deg, -15deg);\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 50px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: skew(50deg, -15deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\"><strong>K\u1ebft qu\u1ea3:<\/strong> V\u1edbi transform: skew(50deg, -15deg); ph\u1ea7n t\u1eed div m\u00e0u cam nghi\u00eang sang ph\u1ea3i v\u00e0 h\u01b0\u1edbng l\u00ean tr\u00ean.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra c\u00f2n c\u00f3 skewX() l\u00e0m div nghi\u00eang theo tr\u1ee5c ngang v\u00e0 skewY() l\u00e0m nghi\u00eang div theo tr\u1ee5c d\u1ecdc.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75937\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-31-vippro.png\" alt=\"\" width=\"1391\" height=\"589\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-31-vippro.png 1391w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-31-vippro-300x127.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-31-vippro-700x296.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-31-vippro-200x85.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-31-vippro-100x42.png 100w\" sizes=\"auto, (max-width: 1391px) 100vw, 1391px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b> <span style=\"font-weight: 400;\">Thi\u1ebft l\u1eadp ph\u1ea7n t\u1eed div nghi\u00eang sang ph\u1ea3i theo chi\u1ec1u ngang v\u1edbi transform: skewX(50deg);<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 50px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: skewX(50deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75938\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-32-vippro.png\" alt=\"\" width=\"1385\" height=\"652\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-32-vippro.png 1385w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-32-vippro-300x141.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-32-vippro-700x330.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-32-vippro-200x94.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-32-vippro-100x47.png 100w\" sizes=\"auto, (max-width: 1385px) 100vw, 1385px\" \/><\/p>\n<p><b>V\u00ed d\u1ee5:<\/b><span style=\"font-weight: 400;\"> Thi\u1ebft l\u1eadp ph\u1ea7n t\u1eed div nghi\u00eang theo chi\u1ec1u d\u1ecdc v\u1edbi transform: skewY(50deg);\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 50px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: skewY(50deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75939\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-33-vippro.png\" alt=\"\" width=\"1388\" height=\"638\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-33-vippro.png 1388w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-33-vippro-300x138.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-33-vippro-700x322.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-33-vippro-200x92.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-33-vippro-100x46.png 100w\" sizes=\"auto, (max-width: 1388px) 100vw, 1388px\" \/><\/p>\n<h3><b>K\u1ebft h\u1ee3p c\u00e1c Transform CSS 2D<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu mu\u1ed1n \u00e1p d\u1ee5ng nhi\u1ec1u ph\u01b0\u01a1ng th\u1ee9c transform CSS cho c\u00f9ng m\u1ed9t b\u1ed9 ch\u1ecdn, b\u1ea1n kh\u00f4ng c\u1ea7n khai b\u00e1o nhi\u1ec1u thu\u1ed9c t\u00ednh transform. Thay v\u00e0o \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u gi\u00e1 tr\u1ecb th\u00e0nh m\u1ed9t khai b\u00e1o b\u1eb1ng c\u00e1ch li\u1ec7t k\u00ea ch\u00fang v\u1edbi kho\u1ea3ng tr\u1eafng \u1edf gi\u1eefa m\u1ed7i gi\u00e1 tr\u1ecb.<\/span><\/p>\n<blockquote><p><b>L\u01b0u \u00fd<\/b><span style=\"font-weight: 400;\">: Tr\u00ecnh duy\u1ec7t s\u1ebd \u00e1p d\u1ee5ng c\u00e1c chuy\u1ec3n \u0111\u1ed5i theo th\u1ee9 t\u1ef1 \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea t\u1eeb tr\u00e1i sang ph\u1ea3i. M\u1ed7i chuy\u1ec3n \u0111\u1ed5i s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng d\u1ef1a tr\u00ean k\u1ebft qu\u1ea3 c\u1ee7a c\u00e1c chuy\u1ec3n \u0111\u1ed5i tr\u01b0\u1edbc \u0111\u00f3.<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\"><strong>V\u00ed d\u1ee5:<\/strong> Thi\u1ebft l\u1eadp ba ph\u01b0\u01a1ng th\u1ee9c translate(), scale() v\u00e0 rotate() trong c\u00f9ng m\u1ed9t khai b\u00e1o.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">transform: translate(100px, 20px) scale(0.8) rotate(30deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75940\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-34-vippro.png\" alt=\"\" width=\"1387\" height=\"635\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-34-vippro.png 1387w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-34-vippro-300x137.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-34-vippro-700x320.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-34-vippro-200x92.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-34-vippro-100x46.png 100w\" sizes=\"auto, (max-width: 1387px) 100vw, 1387px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cach_chuyen_doi_phan_tu_3D_3D_Transform_CSS\"><\/span><b>C\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 3D (3D Transform CSS)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u00e1c ph\u00e9p chuy\u1ec3n \u0111\u1ed5i CSS ba chi\u1ec1u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n d\u1ef1a theo tr\u1ee5c Z c\u1ee7a trang. N\u1ebfu b\u1ea1n t\u01b0\u1edfng t\u01b0\u1ee3ng chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a m\u00e0n h\u00ecnh l\u1ea7n l\u01b0\u1ee3t l\u00e0 tr\u1ee5c X v\u00e0 tr\u1ee5c Y th\u00ec tr\u1ee5c Z l\u00e0 \u201c\u0111\u1ed9 s\u00e2u\u201d c\u1ee7a m\u00e0n h\u00ecnh. Gi\u00e1 tr\u1ecb Z c\u00e0ng l\u1edbn, ph\u1ea7n t\u1eed c\u00e0ng c\u00f3 v\u1ebb &#8220;g\u1ea7n&#8221; h\u01a1n v\u1edbi ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<p><a href=\"https:\/\/codepen.io\/alvinwan\/pen\/WPapwm\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 c\u00e1ch thi\u1ebft l\u1eadp<\/span><\/i><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 c\u00e1ch chuy\u1ec3n \u0111\u1ed5i c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ec3 t\u0103ng th\u00eam chi\u1ec1u s\u00e2u cho trang web.<\/span><\/p>\n<h3><b>Transform CSS: Perspective<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb perspective() thi\u1ebft l\u1eadp \u0111\u1ed9 s\u00e2u c\u1ee7a ph\u1ea7n t\u1eed tr\u00ean tr\u1ee5c Z. N\u00f3 \u0111i\u1ec1u ch\u1ec9nh c\u1ea3m gi\u00e1c &#8220;g\u1ea7n&#8221; ho\u1eb7c &#8220;xa&#8221; c\u1ee7a ph\u1ea7n t\u1eed. perspective() \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p v\u1edbi c\u00e1c ph\u01b0\u01a1ng th\u1ee9c transform 3D kh\u00e1c.<\/span><\/p>\n<h3><b>Transform CSS: rotateX() and rotateY()<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb rotateX() v\u00e0 rotateY() xoay div &#8220;quanh&#8221; c\u00e1c tr\u1ee5c X v\u00e0 Y.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;container&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-1&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-1 { transform: rotateX(130deg); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-2 { transform: rotateY(130deg); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.group {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 200px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original, .transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: green;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original { background-color: #213343; }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#container {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 25px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 25px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75941\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-35-vippro.png\" alt=\"\" width=\"1388\" height=\"568\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-35-vippro.png 1388w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-35-vippro-300x123.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-35-vippro-700x286.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-35-vippro-200x82.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-35-vippro-100x41.png 100w\" sizes=\"auto, (max-width: 1388px) 100vw, 1388px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c n\u00e0y v\u1edbi perspective(), ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh nh\u01b0 \u0111ang xoay v\u1ec1 ph\u00eda ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;container&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-1&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-3&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-1 { transform: perspective(500px) rotateY(40deg); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-2 { transform: perspective(500px) rotateY(60deg); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-3 { transform: perspective(500px) rotateY(80deg); }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.group {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 200px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original, .transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: green;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original { background-color: #213343; }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#container {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 25px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 25px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75942\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-36-vippro.png\" alt=\"\" width=\"1392\" height=\"614\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-36-vippro.png 1392w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-36-vippro-300x132.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-36-vippro-700x309.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-36-vippro-200x88.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-36-vippro-100x44.png 100w\" sizes=\"auto, (max-width: 1392px) 100vw, 1392px\" \/><\/p>\n<h3><b>translateZ<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Khi \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi perspective() , translateZ() t\u1ea1o ra hi\u1ec7u \u1ee9ng di chuy\u1ec3n ti\u1ebfn ho\u1eb7c l\u00f9i tr\u00ean tr\u1ee5c Z c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed. V\u00ed d\u1ee5:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 75px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 75px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: perspective(500px) translateZ(200px) ;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75943\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-37-vippro.png\" alt=\"\" width=\"1389\" height=\"556\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-37-vippro.png 1389w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-37-vippro-300x120.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-37-vippro-700x280.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-37-vippro-200x80.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-37-vippro-100x40.png 100w\" sizes=\"auto, (max-width: 1389px) 100vw, 1389px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Thuoc_tinh_transform-origin_CSS\"><\/span><b>Thu\u1ed9c t\u00ednh transform-origin CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">transform-origin l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh CSS kh\u00e1c c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi transform. Thu\u1ed9c t\u00ednh transform-origin thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a \u0111i\u1ec3m g\u1ed1c &#8211; \u0111i\u1ec3m m\u00e0 ph\u00e9p bi\u1ebfn \u0111\u1ed5i b\u1eaft \u0111\u1ea7u ho\u1eb7c xoay quanh \u0111\u00f3.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y r\u00f5 hi\u1ec7u \u1ee9ng c\u1ee7a transform-origin nh\u1ea5t v\u1edbi ph\u01b0\u01a1ng th\u1ee9c rotate(). Trong v\u00ed d\u1ee5 sau, ITviec s\u1eed d\u1ee5ng transform-origin \u0111\u1ec3 di chuy\u1ec3n \u0111i\u1ec3m trung t\u00e2m c\u1ee7a ph\u00e9p xoay.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;container&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-1&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=&#8221;group&#8221;&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;original&#8221;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div class=&#8221;transformed&#8221; id=&#8221;transformed-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: rotate(45deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform-origin: top left;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#transformed-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: rotate(45deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform-origin: bottom left;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.group {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 200px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original, .transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: green;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.original { background-color: #213343; }<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.transformed {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#container {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 125px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75944\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-38-vippro.png\" alt=\"\" width=\"1390\" height=\"631\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-38-vippro.png 1390w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-38-vippro-300x136.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-38-vippro-700x318.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-38-vippro-200x91.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-38-vippro-100x45.png 100w\" sizes=\"auto, (max-width: 1390px) 100vw, 1390px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec3m g\u1ed1c c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh theo kho\u1ea3ng c\u00e1ch pixel t\u1eeb g\u00f3c tr\u00ean c\u00f9ng b\u00ean tr\u00e1i c\u1ee7a ph\u1ea7n t\u1eed g\u1ed1c, v\u00ed d\u1ee5:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: rotate(45deg);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform-origin: 75px 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75946\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-39-vippro.png\" alt=\"\" width=\"1388\" height=\"673\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-39-vippro.png 1388w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-39-vippro-300x145.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-39-vippro-700x339.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-39-vippro-200x97.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-39-vippro-100x48.png 100w\" sizes=\"auto, (max-width: 1388px) 100vw, 1388px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 kh\u00e1c s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh transform-origin k\u1ebft h\u1ee3p ph\u01b0\u01a1ng th\u1ee9c scale().<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>HTML<\/b><\/td>\n<td><b>CSS<\/b><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-1&#8243;&gt;original&lt;\/div&gt;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&lt;div id=&#8221;div-2&#8243;&gt;transformed&lt;\/div&gt;<\/span><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">div {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0width: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 150px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 20px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0color: #FFFFFF;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0font-family: Arial;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0top: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0left: 100px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-1 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #213343;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">#div-2 {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform: scale(2);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0transform-origin: 100% 0%;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0background-color: #FF5C35;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u00a0\u00a0opacity: 0.8;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-75947\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-40-vippro.png\" alt=\"\" width=\"1388\" height=\"723\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-40-vippro.png 1388w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-40-vippro-300x156.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-40-vippro-700x365.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-40-vippro-200x104.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/transform-css-40-vippro-100x52.png 100w\" sizes=\"auto, (max-width: 1388px) 100vw, 1388px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Nhung_luu_y_can_biet_khi_su_dung_transform_CSS\"><\/span><b>Nh\u1eefng l\u01b0u \u00fd c\u1ea7n bi\u1ebft khi s\u1eed d\u1ee5ng transform CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Transform t\u1ea1o ra ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng (stacking context)<\/b><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111\u1eb7t thu\u1ed9c t\u00ednh transform th\u00e0nh b\u1ea5t k\u1ef3 gi\u00e1 tr\u1ecb n\u00e0o kh\u00e1c ngo\u00e0i none (kh\u00f4ng), tr\u00ecnh duy\u1ec7t s\u1ebd t\u1ea1o ra m\u1ed9t ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng (stacking context) cho ph\u1ea7n t\u1eed \u0111\u00f3.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c bi\u1ebfn \u0111\u1ed5i s\u1ebd ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t kh\u1ed1i ch\u1ee9a (containing block) cho b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb tuy\u1ec7t \u0111\u1ed1i (absolute) ho\u1eb7c c\u1ed1 \u0111\u1ecbnh (fixed) n\u1eb1m b\u00ean trong n\u00f3.<\/span><\/p>\n<p><b>Ho\u1ea1t \u1ea3nh ph\u00f3ng to thu nh\u1ecf g\u00e2y ra v\u1ea5n \u0111\u1ec1 v\u1ec1 tr\u1ee3 n\u0103ng<\/b><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu trang web c\u1ee7a b\u1ea1n c\u00f3 c\u00e1c ho\u1ea1t \u1ea3nh ph\u00f3ng to ho\u1eb7c thu nh\u1ecf, h\u00e3y cung c\u1ea5p cho ng\u01b0\u1eddi d\u00f9ng t\u00f9y ch\u1ecdn t\u1eaft ho\u1ea1t \u1ea3nh. \u0110i\u1ec1u n\u00e0y l\u00e0 b\u1edfi c\u00e1c ho\u1ea1t \u1ea3nh ph\u00f3ng to ho\u1eb7c thu nh\u1ecf c\u00f3 th\u1ec3 g\u00e2y ra c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 tr\u1ee3 n\u0103ng cho ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<p><b>Kh\u00f4ng ph\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ec1u c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng transform<\/b><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n kh\u00f4ng th\u1ec3 \u00e1p d\u1ee5ng transform cho c\u00e1c ki\u1ec3u h\u1ed9p (box model) sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c ph\u1ea7n t\u1eed n\u1ed9i tuy\u1ebfn kh\u00f4ng thay th\u1ebf (Non-replaced inline elements). V\u00ed d\u1ee5 nh\u01b0 c\u00e1c th\u1ebb &lt;span&gt; ch\u1ee9a v\u0103n b\u1ea3n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c h\u1ed9p c\u1ed9t b\u1ea3ng (table-column boxes)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Nh\u00f3m c\u1ed9t b\u1ea3ng (table-column-group)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng c\u00e1c tr\u00ecnh duy\u1ec7t ti\u1ec1n t\u1ed1: M\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t c\u0169 h\u01a1n c\u00f3 th\u1ec3 y\u00eau c\u1ea7u s\u1eed d\u1ee5ng c\u00e1c tr\u00ecnh duy\u1ec7t ti\u1ec1n t\u1ed1 cho c\u00e1c thu\u1ed9c t\u00ednh transform. V\u00ed d\u1ee5: -webkit-transform, -moz-transform, -ms-transform, -o-transform.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Transform_CSS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Transform CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Transform c\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn lu\u1ed3ng t\u00e0i li\u1ec7u hay kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1eb1ng c\u00e1ch thay \u0111\u1ed5i kh\u00f4ng gian t\u1ecda \u0111\u1ed9 (coordinate space), transforms CSS l\u00e0m thay \u0111\u1ed5i h\u00ecnh d\u1ea1ng v\u00e0 v\u1ecb tr\u00ed c\u1ee7a n\u1ed9i dung \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng m\u00e0 kh\u00f4ng l\u00e0m \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn b\u1ed1 c\u1ee5c t\u00e0i li\u1ec7u th\u00f4ng th\u01b0\u1eddng (normal document flow).<\/span><\/p>\n<h3><b>C\u00f3 th\u1ec3 th\u00eam nhi\u1ec1u gi\u00e1 tr\u1ecb v\u00e0o thu\u1ed9c t\u00ednh transform kh\u00f4ng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh transform c\u00f3 th\u1ec3 nh\u1eadn nhi\u1ec1u gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng l\u1ea7n l\u01b0\u1ee3t. N\u00f3 s\u1ebd \u00e1p d\u1ee5ng gi\u00e1 tr\u1ecb \u1edf ngo\u00e0i c\u00f9ng b\u00ean ph\u1ea3i tr\u01b0\u1edbc v\u00e0 sau \u0111\u00f3 l\u00e0 c\u00e1c gi\u00e1 tr\u1ecb b\u00ean tr\u00e1i, ngh\u0129a l\u00e0 gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea cu\u1ed1i c\u00f9ng trong danh s\u00e1ch s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng \u0111\u1ea7u ti\u00ean.<\/span><\/p>\n<h3><b>T\u1ea1i sao th\u1ee9 t\u1ef1 c\u1ee7a h\u00e0m transform l\u1ea1i quan tr\u1ecdng?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Do tr\u00ecnh duy\u1ec7t \u00e1p d\u1ee5ng c\u00e1c bi\u1ebfn \u0111\u1ed5i theo th\u1ee9 t\u1ef1 \u0111\u01b0\u1ee3c khai b\u00e1o, n\u00ean th\u1ee9 t\u1ef1 b\u1ea1n li\u1ec7t k\u00ea c\u00e1c h\u00e0m s\u1ebd quy\u1ebft \u0111\u1ecbnh hi\u1ec7u \u1ee9ng cu\u1ed1i c\u00f9ng. Ngo\u00e0i ra, th\u1ee9 t\u1ef1 c\u1ee7a c\u00e1c h\u00e0m chuy\u1ec3n \u0111\u1ed5i c\u0169ng c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t. V\u00ed d\u1ee5, n\u1ebfu b\u1ea1n \u0111ang k\u1ebft h\u1ee3p nhi\u1ec1u bi\u1ebfn \u0111\u1ed5i ph\u1ee9c t\u1ea1p, vi\u1ec7c s\u1eafp x\u1ebfp c\u00e1c bi\u1ebfn \u0111\u1ed5i theo th\u1ee9 t\u1ef1 hi\u1ec7u qu\u1ea3 nh\u1ea5t c\u00f3 th\u1ec3 gi\u00fap c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t hi\u1ec3n th\u1ecb.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Nh\u01b0 v\u1eady trong b\u00e0i vi\u1ebft n\u00e0y, ITviec \u0111\u00e3 h\u01b0\u1edbng d\u1eabn b\u1ea1n nh\u1eefng c\u00e1ch s\u1eed d\u1ee5ng transform CSS \u0111\u1ec3 xoay, di chuy\u1ec3n, thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00e0 t\u1ea1o c\u00e1c bi\u1ebfn \u0111\u1ed5i ph\u1ee9c t\u1ea1p cho c\u00e1c ph\u1ea7n t\u1eed HTML. H\u00e3y th\u1eed \u00e1p d\u1ee5ng ngay cho trang web c\u1ee7a m\u00ecnh \u0111\u1ec3 ch\u00fang th\u1eadt \u1ea5n t\u01b0\u1ee3ng nh\u00e9.<\/span><\/p>\n<p>Tham kh\u1ea3o c\u00e1c b\u00e0i vi\u1ebft thu\u1ed9c ch\u1ee7 \u0111\u1ec1 CSS tr\u00ean ITviec:<\/p>\n<ul>\n<li><a href=\"https:\/\/itviec.com\/blog\/transition-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Transition CSS l\u00e0 g\u00ec? Ph\u00e2n bi\u1ec7t transition CSS v\u00e0 animation CSS<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/border-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Border CSS: H\u01b0\u1edbng d\u1eabn chi ti\u1ebft 9 c\u00e1ch s\u1eed d\u1ee5ng border CSS<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/animation-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Animation CSS: T\u1ed5ng h\u1ee3p 11 hi\u1ec7u \u1ee9ng Animation CSS ph\u1ed5 bi\u1ebfn<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Tailwind CSS: H\u01b0\u1edbng d\u1eabn 3 c\u00e1ch thi\u1ebft l\u1eadp Tailwind chi ti\u1ebft<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/grid-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/background-css\/\" target=\"_blank\" rel=\"noopener\"><strong>H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch d\u00f9ng 8 thu\u1ed9c t\u00ednh background CSS<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/hover-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Hover CSS: Chi ti\u1ebft c\u00e1ch t\u1ea1o Hover CSS v\u00e0 c\u00e1c v\u00ed d\u1ee5 c\u1ee5 th\u1ec3<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/overflow-css-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>Overflow CSS l\u00e0 g\u00ec? C\u00e1ch \u1ee9ng d\u1ee5ng thu\u1ed9c t\u00ednh Overflow<\/strong><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS mang \u0111\u1ebfn cho b\u1ea1n h\u00e0ng lo\u1ea1t t\u00ednh n\u0103ng \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t trang web m\u1edbi m\u1ebb v\u00e0 \u1ea5n t\u01b0\u1ee3ng. Ngo\u00e0i t\u00f4 n\u1ec1n (background), t\u1ea1o b\u00f3ng \u0111\u1ed5 (box shadow), t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n (border), c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang c\u00f2n c\u00f3 th\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed, k\u00edch th\u01b0\u1edbc, c\u00e1ch hi\u1ec3n th\u1ecb v\u1edbi thu\u1ed9c t\u00ednh transform CSS. [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":75948,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-75653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Transform CSS d\u00f9ng \u0111\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed, k\u00edch th\u01b0\u1edbc,... B\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn c\u1ee5 th\u1ec3 c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D v\u1edbi thu\u1ed9c t\u00ednh transform.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D\" \/>\n<meta property=\"og:description\" content=\"CSS mang \u0111\u1ebfn cho b\u1ea1n h\u00e0ng lo\u1ea1t t\u00ednh n\u0103ng \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t trang web m\u1edbi m\u1ebb v\u00e0 \u1ea5n t\u01b0\u1ee3ng. Ngo\u00e0i t\u00f4 n\u1ec1n (background), t\u1ea1o b\u00f3ng \u0111\u1ed5 (box shadow), t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/transform-css-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-21T15:08:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/Transform-CSS-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D - ITviec Blog","description":"Transform CSS d\u00f9ng \u0111\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed, k\u00edch th\u01b0\u1edbc,... B\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn c\u1ee5 th\u1ec3 c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D v\u1edbi thu\u1ed9c t\u00ednh transform.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D","og_description":"CSS mang \u0111\u1ebfn cho b\u1ea1n h\u00e0ng lo\u1ea1t t\u00ednh n\u0103ng \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t trang web m\u1edbi m\u1ebb v\u00e0 \u1ea5n t\u01b0\u1ee3ng. Ngo\u00e0i t\u00f4 n\u1ec1n (background), t\u1ea1o b\u00f3ng \u0111\u1ed5 (box shadow), t\u1ea1o \u0111\u01b0\u1eddng vi\u1ec1n","og_url":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-07-21T15:08:57+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/Transform-CSS-vippro.jpg","type":"image\/jpeg"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"29 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D","datePublished":"2024-07-21T15:08:57+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/"},"wordCount":5456,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/Transform-CSS-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/","url":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/","name":"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/Transform-CSS-vippro.jpg","datePublished":"2024-07-21T15:08:57+00:00","description":"Transform CSS d\u00f9ng \u0111\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed, k\u00edch th\u01b0\u1edbc,... B\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn c\u1ee5 th\u1ec3 c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D v\u1edbi thu\u1ed9c t\u00ednh transform.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/transform-css-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/Transform-CSS-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/07\/Transform-CSS-vippro.jpg","width":1500,"height":790,"caption":"transform css - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/transform-css-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Transform CSS: Chi ti\u1ebft c\u00e1ch chuy\u1ec3n \u0111\u1ed5i ph\u1ea7n t\u1eed 2D v\u00e0 3D"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/75653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=75653"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/75653\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/75948"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=75653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=75653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=75653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}