From 940f2ad974206c3404a347923d4a3dc91ae3859d Mon Sep 17 00:00:00 2001 From: abdultalha0862 <20211a0405@bvrit.ac.in> Date: Sun, 22 Feb 2026 10:10:49 +0000 Subject: [PATCH 1/9] Add documentation for CSS `matrix()` function --- .../terms/matrix/matrix.md | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 content/css/concepts/transform-functions/terms/matrix/matrix.md diff --git a/content/css/concepts/transform-functions/terms/matrix/matrix.md b/content/css/concepts/transform-functions/terms/matrix/matrix.md new file mode 100644 index 00000000000..b0cd206c48e --- /dev/null +++ b/content/css/concepts/transform-functions/terms/matrix/matrix.md @@ -0,0 +1,86 @@ +--- +Title: 'matrix()' +Description: 'Applies a 2D matrix to scale, rotate, skew, and move an element.' +Subjects: + - 'Web Design' + - 'Web Development' +Tags: + - 'Elements' + - 'Functions' + - 'Positioning' + - 'Values' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' +--- + +The CSS `matrix()` function uses a 2D matrix to scale, rotate, skew, and move an element. This combined setup puts multiple changes into one step and is commonly used in detailed animations[(https://www.codecademy.com/resources/docs/css/animations)], exact placement, or creative web layouts. + +## CSS `matrix()` Syntax + +```pseudo +transform: matrix(a, b, c, d, e, f); +``` + +**Parameters:** + +- `a`: Controls horizontal scaling. A value of `1` results in no horizontal scaling. +- `b`: Controls vertical skewing. A value of `0` results in no vertical skew. +- `c`: Controls horizontal skewing. A value of `0` results in no horizontal skew. +- `d`: Controls vertical scaling. A value of `1` results in no vertical scaling. +- `e`: Controls horizontal translation in pixels. A value of `0` results in no horizontal movement. +- `f`: Controls vertical translation in pixels. A value of `0` results in no vertical movement. + +## Example 1: Basic Translation in CSS Using `matrix()` + +In this example, the `.box` element is moved `100px` to the right and `100px` down using CSS `matrix()`, demonstrating how the `e` and `f` parameters control horizontal and vertical translation: + +```css +.box { + width: 100px; + height: 100px; + background-color: coral; + transform: matrix(1, 0, 0, 1, 100, 100); + margin: 50px; +} +``` + +Here is the output: + +![Matrix translation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-1.png) + +## Example 2: Scaling Elements in CSS Using `matrix()` + +In this example, the `.box` element is scaled to `1.5` times its original size horizontally and `2` times vertically by modifying the `a` and `d` parameters: + +```css +.box { + width: 100px; + height: 100px; + background-color: mediumseagreen; + transform: matrix(1.5, 0, 0, 2, 0, 0); + margin: 50px; +} +``` + +Here is the output: + +![Matrix scaling example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png) + +## Example 3: Combined Transformation in CSS With the Help of `matrix()` + +This example creates a complex transformation by combining scaling, skewing, and translation in a single `matrix()` function: + +```css +.box { + width: 100px; + height: 100px; + background-color: steelblue; + transform: matrix(1.2, 0.3, -0.3, 1.2, 50, 30); + margin: 50px; +} +``` + +Here is the output: + +![Matrix combined transformation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png) From 0501ea578ba8c6d91669b0ba1d78e0acf237bb93 Mon Sep 17 00:00:00 2001 From: abdultalha0862 <20211a0405@bvrit.ac.in> Date: Sun, 22 Feb 2026 10:11:06 +0000 Subject: [PATCH 2/9] Add matrix example image --- media/matrix-example-1.png | Bin 0 -> 1302 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100755 media/matrix-example-1.png diff --git a/media/matrix-example-1.png b/media/matrix-example-1.png new file mode 100755 index 0000000000000000000000000000000000000000..d636e58a140f348f40fda3060092d1f568091e0a GIT binary patch literal 1302 zcmeAS@N?(olHy`uVBq!ia0y~yV9W<%Hx4$S$kO?8uYeR|age(c!@6@aFM%AEbVpxD z28NCO+ydHbM_@RHr zJqE`|yaFnt)KCe6Eoo`z1RK&n?_q2@BCX&tO3^+DUa;-x6No)~{y_tbP0 Hl+XkK=gY2x literal 0 HcmV?d00001 From 474c6d8db26532d6a2b981f1b4c1d930f30b834c Mon Sep 17 00:00:00 2001 From: abdultalha0862 <20211a0405@bvrit.ac.in> Date: Sun, 22 Feb 2026 10:11:15 +0000 Subject: [PATCH 3/9] Add matrix example image --- media/matrix-example-2.png | Bin 0 -> 821 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100755 media/matrix-example-2.png diff --git a/media/matrix-example-2.png b/media/matrix-example-2.png new file mode 100755 index 0000000000000000000000000000000000000000..0b150090e8c1a467c31a757c100d72df6608ccc5 GIT binary patch literal 821 zcmeAS@N?(olHy`uVBq!ia0vp^mx1^y2OE$)8+Y^wkYX$ja(7}_cTVOdki(Mh=!V|b zS`LLJXKc%rh-&c7NzxAc+$)yi5dOvOwB^I<{?2Dcn`QitTPl3pWY^n%d-vNPtM2Bo zAGqJasg%^zF+)K~tz(pl8V;L);k8rtQ2kyzyZ+Mc_xsk*(ie6)!Xjws=;9+FIGCB! zw)cOxJT7rsA~|n+{G9L8-<{LD8(Vd+EdGA&^X=t-a_-)Rc<7eV^DpNd4&=)Xkhgxa Y^aLoC`CY&74@~L|p00i_>zopr0DjW~_y7O^ literal 0 HcmV?d00001 From 4ff1d7299ff2f0a90e022391f8514b68b0592541 Mon Sep 17 00:00:00 2001 From: abdultalha0862 <20211a0405@bvrit.ac.in> Date: Sun, 22 Feb 2026 10:11:24 +0000 Subject: [PATCH 4/9] Add matrix example image --- media/matrix-example-3.png | Bin 0 -> 2128 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100755 media/matrix-example-3.png diff --git a/media/matrix-example-3.png b/media/matrix-example-3.png new file mode 100755 index 0000000000000000000000000000000000000000..dc2643fa1210bb34ef17354e6df305509ca3126a GIT binary patch literal 2128 zcmcJR`%@EF6vyL(3i1q?Q79D+4T>V0z)%J23y5eJDW>s(f;3e@!3PR-M2U9n3I;`r zC_$=&K_d|bB!FVnwMJ2a5FaE|&|py$6bOh&6c?oTUgAvuf&Q?2cfaRz&iUSx-6W#$ zun^nvF5_u5n(fjh!91`Uz@fAJ3Y^RSw$p-TR3a}VkXEX8eFJXB#x7d6h(;^VvK|yz zfP1TiB@u}6ZpC;_q5#)Ro6GR!&OmT_v#?_jNXJM%n~C&9PQ< zOA_@|ck3#i{&|#IXB~xK3DYSUSG=PF=4fgX7W)x2HQ0*1K3TZrIQbK9u~cK<>;SB4RxZ$~GQkukC`t zdKac@G7Q%2klHs^VewP=UPtGvrXy+iak_Id&J6^t2<2dGY%KrBC`g&q4`?B@^{x%u{n=%x_aj+H&mpRM6$5 zD>Wk2RE-FckreL{*rT$x3S-QJ#22CF>WC0|lHz3}0to()_#)KY7!e|$QM~1d0D>PR zz6dNO$=86nB#16y3=WJiyKt^ej?k*elH$=}4y%sj-$95RW6Xj`Awa-zt%{}tYtTIF zG0Cq)NF~PbL{*G9cRWOv0B;CsA^B$!av5W=P!)iH`C1ii0_G6%g5)1VNHxYlvtV}P zTuX=?1YQu*LGlTNC@{SpjL0ZnHxx3=g805!5M9UgXdggOBf>0*Uz-IHiRqC?Ae17) zEQoE)LhU6?kNN}Q2qfyvg4oL})XFjKT(}!~7v7HyfyfOswnmcQ19NICF|98|e2jQM zauiDO<{{)M$$x;5%b0d1ssa#XX$z==HvE$0mm#DY)4HQ7-FQFpbQn}YNGHk9LWly> z2B0e4cop(;k>Zu0Mtvl|6Cu|zEqH-|mma(dc~MckSqPy>emz1+jP>SDTU(o8pt^V( zHBRwvXuIC`Va=6Q^R=-BsjKG~J$~iXXV8V{ogOxrLSpNSl3IwAEOuLY%C==ar*>aS z4NGTpju|rt3v%P=hMb`>#=(Y(3*JsqSv(OZxCo+)m*$-;XFG3<&R}znE?2MCLaWo1 zk-vdYbGb=coL=i}os(^nS~{JX^ycu2255>olDs*(I1VLmg~|ILfn+!>bMhmQd;liX zKY--s%w2bj7lRji4&5*soHMJj6|7M8>b%1WjGK3Vi^g~5g|u3da1wa`MG}oNiZ^ql zGfa-iOuZX-{6C#jqT{4&|Mdc&Po!psVB7YST0K6oGR1rNIWyS%OhI{Z{|8P%m)mPF z7ez|X>vW?ickxF`yq(8VIZ6tp(WQGigPu>ng*UkkiSeJ>Iv>=xwn5?cRn;u-UT3vR)OuxECZ_S78L-N;@s9%9_E5E9?Td z#$OhCD!2R|-kA@lN=?z|8>#_2nb@7`+l|v>YzV~@@T?KeP7;#+lAItgu;XPFFcMZl z1at!7h(Hq_s}nO-oJ_|K@XQhZ>4zoi>!3(tokItB!U!u1+hhZ1bLT>^<;ca3_jbu9 zsQ9c&51>Gi!n78NngltU1ln-$Bft!O|MokH9LsX>Q0$44b=A8QR@cNqy4E>!hX6jB qbIQw&_L1)4;2;=1>i=JctRMXH=KNaDI5qeeKwHWU3oZ@(dH=t Date: Sun, 22 Feb 2026 10:38:38 +0000 Subject: [PATCH 5/9] Fix formatting of link in CSS `matrix()` function --- content/css/concepts/transform-functions/terms/matrix/matrix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/css/concepts/transform-functions/terms/matrix/matrix.md b/content/css/concepts/transform-functions/terms/matrix/matrix.md index b0cd206c48e..7e0c661891d 100644 --- a/content/css/concepts/transform-functions/terms/matrix/matrix.md +++ b/content/css/concepts/transform-functions/terms/matrix/matrix.md @@ -14,7 +14,7 @@ CatalogContent: - 'paths/front-end-engineer-career-path' --- -The CSS `matrix()` function uses a 2D matrix to scale, rotate, skew, and move an element. This combined setup puts multiple changes into one step and is commonly used in detailed animations[(https://www.codecademy.com/resources/docs/css/animations)], exact placement, or creative web layouts. +The CSS `matrix()` function uses a 2D matrix to scale, rotate, skew, and move an element. This combined setup puts multiple changes into one step and is commonly used in detailed animations(https://www.codecademy.com/resources/docs/css/animations), exact placement, or creative web layouts. ## CSS `matrix()` Syntax From c0fa740de1f80b099059fe09ce986d847fb51df3 Mon Sep 17 00:00:00 2001 From: abdultalha0862 <20211a0405@bvrit.ac.in> Date: Sun, 22 Feb 2026 10:51:25 +0000 Subject: [PATCH 6/9] Enhance image descriptions for CSS `matrix()` examples --- .../css/concepts/transform-functions/terms/matrix/matrix.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/css/concepts/transform-functions/terms/matrix/matrix.md b/content/css/concepts/transform-functions/terms/matrix/matrix.md index 7e0c661891d..b5dc76623ff 100644 --- a/content/css/concepts/transform-functions/terms/matrix/matrix.md +++ b/content/css/concepts/transform-functions/terms/matrix/matrix.md @@ -47,7 +47,7 @@ In this example, the `.box` element is moved `100px` to the right and `100px` do Here is the output: -![Matrix translation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-1.png) +![A coral colored box translated 100 pixels to the right and 100 pixels down using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-1.png) ## Example 2: Scaling Elements in CSS Using `matrix()` @@ -65,7 +65,7 @@ In this example, the `.box` element is scaled to `1.5` times its original size h Here is the output: -![Matrix scaling example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png) +![A medium sea green colored box scaled to 1.5 times its original width and 2 times its original height using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png) ## Example 3: Combined Transformation in CSS With the Help of `matrix()` @@ -83,4 +83,4 @@ This example creates a complex transformation by combining scaling, skewing, and Here is the output: -![Matrix combined transformation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png) +![A steel blue colored box with combined transformations scaled by 1.2, skewed, and translated 50 pixels right and 30 pixels down using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png) From 41e721aaf535ba3bb36cb51a48c71302fa7183fc Mon Sep 17 00:00:00 2001 From: abdultalha0862 <20211a0405@bvrit.ac.in> Date: Sun, 22 Feb 2026 11:26:04 +0000 Subject: [PATCH 7/9] Updated example headings in CSS `matrix()` documentation --- .../css/concepts/transform-functions/terms/matrix/matrix.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/css/concepts/transform-functions/terms/matrix/matrix.md b/content/css/concepts/transform-functions/terms/matrix/matrix.md index b5dc76623ff..4040f2e1e13 100644 --- a/content/css/concepts/transform-functions/terms/matrix/matrix.md +++ b/content/css/concepts/transform-functions/terms/matrix/matrix.md @@ -31,7 +31,7 @@ transform: matrix(a, b, c, d, e, f); - `e`: Controls horizontal translation in pixels. A value of `0` results in no horizontal movement. - `f`: Controls vertical translation in pixels. A value of `0` results in no vertical movement. -## Example 1: Basic Translation in CSS Using `matrix()` +## Example 1 In this example, the `.box` element is moved `100px` to the right and `100px` down using CSS `matrix()`, demonstrating how the `e` and `f` parameters control horizontal and vertical translation: @@ -49,7 +49,7 @@ Here is the output: ![A coral colored box translated 100 pixels to the right and 100 pixels down using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-1.png) -## Example 2: Scaling Elements in CSS Using `matrix()` +## Example 2 In this example, the `.box` element is scaled to `1.5` times its original size horizontally and `2` times vertically by modifying the `a` and `d` parameters: @@ -67,7 +67,7 @@ Here is the output: ![A medium sea green colored box scaled to 1.5 times its original width and 2 times its original height using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png) -## Example 3: Combined Transformation in CSS With the Help of `matrix()` +## Example 3 This example creates a complex transformation by combining scaling, skewing, and translation in a single `matrix()` function: From 74c39669fde06ed816e6626927acaff18a29d285 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Mon, 23 Feb 2026 18:13:10 +0530 Subject: [PATCH 8/9] Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- content/css/concepts/transform-functions/terms/matrix/matrix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/css/concepts/transform-functions/terms/matrix/matrix.md b/content/css/concepts/transform-functions/terms/matrix/matrix.md index 4040f2e1e13..e8c26fb1bbc 100644 --- a/content/css/concepts/transform-functions/terms/matrix/matrix.md +++ b/content/css/concepts/transform-functions/terms/matrix/matrix.md @@ -16,7 +16,7 @@ CatalogContent: The CSS `matrix()` function uses a 2D matrix to scale, rotate, skew, and move an element. This combined setup puts multiple changes into one step and is commonly used in detailed animations(https://www.codecademy.com/resources/docs/css/animations), exact placement, or creative web layouts. -## CSS `matrix()` Syntax +## Syntax ```pseudo transform: matrix(a, b, c, d, e, f); From a7c9bb4e2fd907cb6ac643ee76c9e9eef8bb434a Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Mon, 23 Feb 2026 18:17:26 +0530 Subject: [PATCH 9/9] Enhance matrix function documentation Updated the matrix function documentation with improved formatting and added a new tag for 'Animation'. --- .../transform-functions/terms/matrix/matrix.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/content/css/concepts/transform-functions/terms/matrix/matrix.md b/content/css/concepts/transform-functions/terms/matrix/matrix.md index e8c26fb1bbc..302baefbbd8 100644 --- a/content/css/concepts/transform-functions/terms/matrix/matrix.md +++ b/content/css/concepts/transform-functions/terms/matrix/matrix.md @@ -5,7 +5,7 @@ Subjects: - 'Web Design' - 'Web Development' Tags: - - 'Elements' + - 'Animation' - 'Functions' - 'Positioning' - 'Values' @@ -14,7 +14,7 @@ CatalogContent: - 'paths/front-end-engineer-career-path' --- -The CSS `matrix()` function uses a 2D matrix to scale, rotate, skew, and move an element. This combined setup puts multiple changes into one step and is commonly used in detailed animations(https://www.codecademy.com/resources/docs/css/animations), exact placement, or creative web layouts. +The CSS **`matrix()`** function uses a 2D matrix to scale, rotate, skew, and move an element. This combined setup puts multiple changes into one step and is commonly used in detailed [animations](https://www.codecademy.com/resources/docs/css/animations), exact placement, or creative web layouts. ## Syntax @@ -22,6 +22,14 @@ The CSS `matrix()` function uses a 2D matrix to scale, rotate, skew, and move an transform: matrix(a, b, c, d, e, f); ``` +Corresponds to the matrix: + +```plaintext +| a c e | +| b d f | +| 0 0 1 | +``` + **Parameters:** - `a`: Controls horizontal scaling. A value of `1` results in no horizontal scaling.