Added matrix function closes #8236 by abdultalha0862 · Pull Request #8249 · Codecademy/docs

abdultalha0862 · 2026-02-22T10:17:24Z

Description

Added CSS matrix() Transform Function Documentation

Issue Solved

#8236

Type of Change

Adding a new entry

Checklist

All writings are my own.
My entry follows the Codecademy Docs style guide.
My changes generate no new warnings.
I have performed a self-review of my own writing and code.
I have checked my entry and corrected any misspellings.
I have made corresponding changes to the documentation if needed.
I have confirmed my changes are not being pushed from my forked main branch.
I have confirmed that I'm pushing from a new branch named after the changes I'm making.
I have linked any issues that are relevant to this PR in the Issues Solved section.

Copilot

Pull request overview

Adds a new Codecademy Docs term entry documenting the CSS matrix() transform function (issue #8236), including illustrative images for the examples.

Changes:

Added a new term entry at content/css/concepts/transform-functions/terms/matrix/matrix.md.
Added three example output images under media/ and referenced them from the entry.

Reviewed changes

Copilot reviewed 1 out of 4 changed files in this pull request and generated 2 comments.

File	Description
content/css/concepts/transform-functions/terms/matrix/matrix.md	New documentation page for CSS `matrix()` including syntax, parameters, and examples with images.
media/matrix-example-1.png	Output image for Example 1 (translation).
media/matrix-example-2.png	Output image for Example 2 (scaling).
media/matrix-example-3.png	Output image for Example 3 (combined transform).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

content/css/concepts/transform-functions/terms/matrix/matrix.md

Copilot · 2026-02-22T10:20:43Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+
+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


For term entries, the style guide/template expects the syntax section header to be exactly ## Syntax. Using a different header (e.g., ## CSS matrix() Syntax) can make the structure less consistent across entries and tooling that looks for standard sections.

Suggested change

## CSS `matrix()` Syntax

## Syntax

abdultalha0862 · 2026-02-22T10:24:20Z

@mamtawardhani I have submitted the issue #8236. Ready for the review

Please let me know if there are any changes

abdultalha0862 · 2026-02-22T10:29:01Z

@mamtawardhani

In line 19 Copilot suggested this change ## CSS matrix() Syntax to ## Syntax

but in the Official Docs we need to follow this format ## CSS matrix() Syntax

Which one should I follow?

Copilot

Pull request overview

Copilot reviewed 1 out of 4 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 1 out of 4 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-22T10:49:22Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+
+Here is the output:
+
+![Matrix scaling example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png)


The image alt text could be more descriptive to better match the pattern used in other transform function entries. Consider using something like "A medium sea green colored box scaled to 1.5 times horizontally and 2 times vertically using the CSS matrix() function" to provide more context for accessibility.

Suggested change

![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 horizontally and 2 times vertically using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png)

Copilot · 2026-02-22T10:49:22Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+
+Here is the output:
+
+![Matrix combined transformation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png)


The image alt text could be more descriptive to better match the pattern used in other transform function entries. Consider using something like "A steel blue colored box with combined scaling, skewing, and translation applied using the CSS matrix() function" to provide more context for accessibility.

Suggested change

![Matrix combined transformation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png)

![A steel blue colored box with combined scaling, skewing, and translation applied using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png)

Copilot · 2026-02-22T10:49:23Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+
+Here is the output:
+
+![Matrix translation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-1.png)


The image alt text could be more descriptive to better match the pattern used in other transform function entries. For example, rotate.md uses "The CSS rotate() function rotates a box 45 degrees clockwise from its original position, creating a diamond-like appearance". Consider using something like "A coral colored box translated 100 pixels to the right and 100 pixels down using the CSS matrix() function" to provide more context for accessibility.

Copilot

Pull request overview

Copilot reviewed 1 out of 4 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-22T10:54:42Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+## 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:


These example headers exceed the style guide recommendation that headers not exceed 5 words (and many existing transform-function terms use short headers like ## Example 1). Consider shortening these to ## Example 1, ## Example 2, etc., and moving the descriptive text into the paragraph body (or into ### subheaders).

Copilot · 2026-02-22T10:54:42Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+
+![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()`


Same header-length issue as above: this header is longer than the style guide’s recommended maximum (5 words). Please shorten it for consistency/readability.

Copilot · 2026-02-22T10:54:42Z

content/css/concepts/transform-functions/terms/matrix/matrix.md

+
+![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()`


Same header-length issue as above: this header is longer than the style guide’s recommended maximum (5 words). Please shorten it for consistency/readability.

Suggested change

## Example 3: Combined Transformation in CSS With the Help of `matrix()`

## Example 3: Combined matrix() transform

Copilot

Pull request overview

Copilot reviewed 1 out of 4 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

abdultalha0862 added 4 commits February 22, 2026 10:10

Add documentation for CSS matrix() function

940f2ad

Add matrix example image

0501ea5

Add matrix example image

474c6d8

Add matrix example image

4ff1d72

Copilot AI review requested due to automatic review settings February 22, 2026 10:17

Copilot started reviewing on behalf of abdultalha0862 February 22, 2026 10:17 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

Fix formatting of link in CSS matrix() function

b562961

abdultalha0862 requested a review from Copilot February 22, 2026 10:40

Copilot started reviewing on behalf of abdultalha0862 February 22, 2026 10:40 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

abdultalha0862 requested a review from Copilot February 22, 2026 10:46

Copilot started reviewing on behalf of abdultalha0862 February 22, 2026 10:47 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

Enhance image descriptions for CSS matrix() examples

c0fa740

abdultalha0862 requested a review from Copilot February 22, 2026 10:52

Copilot started reviewing on behalf of abdultalha0862 February 22, 2026 10:52 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

Updated example headings in CSS matrix() documentation

41e721a

abdultalha0862 requested a review from Copilot February 22, 2026 11:26

Copilot started reviewing on behalf of abdultalha0862 February 22, 2026 11:27 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

mamtawardhani self-assigned this Feb 23, 2026


		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


		Here is the output:

		![Matrix scaling example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png)

	![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 horizontally and 2 times vertically using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-2.png)


		Here is the output:

		![Matrix combined transformation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png)

	![Matrix combined transformation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png)
	![A steel blue colored box with combined scaling, skewing, and translation applied using the CSS matrix() function](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-3.png)


		Here is the output:

		![Matrix translation example](https://raw.githubusercontent.com/Codecademy/docs/main/media/matrix-example-1.png)

		## 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:


		![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()`


		![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: Combined Transformation in CSS With the Help of `matrix()`
	## Example 3: Combined matrix() transform

Comments

Conversation

abdultalha0862 commented Feb 22, 2026

Description

Issue Solved

Type of Change

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

abdultalha0862 commented Feb 22, 2026

Uh oh!

abdultalha0862 commented Feb 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants