Skip to content
Merged
Prev Previous commit
Next Next commit
Replace CSS transform-function links with cssxref
Search: \[`([^`]+)`\]\(/en-US/docs/Web/CSS/Reference/Values/(transform-function/[^)]+)\)
Replace: {{cssxref("$2")}}
  • Loading branch information
dipikabh committed Dec 17, 2025
commit d074fd2dc382212ae2ea99c65f2bea93b332c4ac
Original file line number Diff line number Diff line change
Expand Up @@ -755,7 +755,7 @@ In fact, we've already seen CSS functions in the [Color](#color) section above,

Aside from applying colors, you can use functions in CSS to do a lot of other things.
For example, [Transform functions](/en-US/docs/Web/CSS/Reference/Values/Functions#transform_functions) are a common way to move, rotate, and scale elements on a page.
You might see [`translate()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/translate) for moving something horizontally or vertically, {{cssxref("rotate()")}} to rotate something, or {{cssxref("scale()")}} to make something bigger or smaller.
You might see {{cssxref("transform-function/translate")}} for moving something horizontally or vertically, {{cssxref("rotate()")}} to rotate something, or {{cssxref("scale()")}} to make something bigger or smaller.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rotate() is a redirect to a property https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/rotate and so is scale.

Copy link
Contributor Author

@dipikabh dipikabh Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, looks like I somehow missed transform-function/. Thanks, good catch!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 95c2838


### Math functions

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ If at all possible, it is better to animate properties that do not cause reflow/

To further improve performance, you should consider moving animation work off the main thread and onto the device's GPU (also referred to as compositing). This is done by choosing specific types of animations that the browser will automatically send to the GPU to handle; these include:

- 3D transform animations such as [`transform: translateZ()`](/en-US/docs/Web/CSS/Reference/Properties/transform) and [`rotate3d()`](/en-US/docs/Web/CSS/Reference/Values/transform-function/rotate3d).
- 3D transform animations such as [`transform: translateZ()`](/en-US/docs/Web/CSS/Reference/Properties/transform) and {{cssxref("transform-function/rotate3d")}}.
- Elements with certain other properties animated such as [`position: fixed`](/en-US/docs/Web/CSS/Reference/Properties/position).
- Elements with {{cssxref("will-change")}} applied (see the section below).
- Certain elements that are rendered in their own layer, including [`<video>`](/en-US/docs/Web/HTML/Reference/Elements/video), [`<canvas>`](/en-US/docs/Web/HTML/Reference/Elements/canvas), and [`<iframe>`](/en-US/docs/Web/HTML/Reference/Elements/iframe).
Expand Down