From 2f24b6b2e44db3cff8c2389cb93ecb2fd336623d Mon Sep 17 00:00:00 2001 From: Paul-Blankson Date: Fri, 15 Aug 2025 11:19:08 +0000 Subject: [PATCH 1/2] Add scale3d() CSS transform function entry --- .../terms/scale3d/scale3d.md | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 content/css/concepts/transform-functions/terms/scale3d/scale3d.md diff --git a/content/css/concepts/transform-functions/terms/scale3d/scale3d.md b/content/css/concepts/transform-functions/terms/scale3d/scale3d.md new file mode 100644 index 00000000000..c89c7bc4b4b --- /dev/null +++ b/content/css/concepts/transform-functions/terms/scale3d/scale3d.md @@ -0,0 +1,75 @@ +--- +Title: 'scale3d()' +Description: 'Scales an element in 3D space along the x, y, and z axes.' +Subjects: + - 'Web Development' + - 'Web Design' +Tags: + - 'Functions' + - 'Positioning' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' + - 'paths/full-stack-engineer-career-path' +--- + +The **`scale3d()`** function scales an element in 3D space along the x, y, and z axes, allowing for three-dimensional transformations. + +## Syntax + +```css +transform: scale3d(, , ); +``` + +where the parameters are: + +- ``: A number or percentage that scales the element along the x-axis (horizontal) +- ``: A number or percentage that scales the element along the y-axis (vertical) +- ``: A number or percentage that scales the element along the z-axis (depth) + +**Note:** Values greater than 1 increase the size, values between 0 and 1 decrease the size, and negative values flip the element along that axis. + +## Example + +Scaling a `.cube` element to be twice as wide, half as tall, and three times as deep: + +```css +.cube { + transform: scale3d(2, 0.5, 3); + transform-style: preserve-3d; +} +``` + +## Codebyte Example + +```codebyte/css + + + + + + +
+
+
+ + +``` From 096647a3e74bf3973276a9d14cec069a4415c1d8 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Fri, 22 Aug 2025 11:44:40 +0530 Subject: [PATCH 2/2] minor fixes --- .../terms/scale3d/scale3d.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/css/concepts/transform-functions/terms/scale3d/scale3d.md b/content/css/concepts/transform-functions/terms/scale3d/scale3d.md index c89c7bc4b4b..d417875f7cd 100644 --- a/content/css/concepts/transform-functions/terms/scale3d/scale3d.md +++ b/content/css/concepts/transform-functions/terms/scale3d/scale3d.md @@ -1,31 +1,31 @@ --- Title: 'scale3d()' -Description: 'Scales an element in 3D space along the x, y, and z axes.' +Description: 'Scales an element in 3D space by multiplying its size along the X, Y, and Z axes.' Subjects: - - 'Web Development' - 'Web Design' + - 'Web Development' Tags: + - 'CSS' - 'Functions' - 'Positioning' CatalogContent: - 'learn-css' - 'paths/front-end-engineer-career-path' - - 'paths/full-stack-engineer-career-path' --- -The **`scale3d()`** function scales an element in 3D space along the x, y, and z axes, allowing for three-dimensional transformations. +The **`scale3d()`** function in CSS scales an element in 3D space along the X, Y, and Z axes, allowing for three-dimensional transformations. ## Syntax -```css -transform: scale3d(, , ); +```pseudo +transform: scale3d(sx, sy, sz); ``` -where the parameters are: +**Parameters:** -- ``: A number or percentage that scales the element along the x-axis (horizontal) -- ``: A number or percentage that scales the element along the y-axis (vertical) -- ``: A number or percentage that scales the element along the z-axis (depth) +- `sx`: A number that scales the element along the X-axis (horizontal). +- `sy`: A number that scales the element along the Y-axis (vertical). +- `sz`: A number that scales the element along the Z-axis (depth). **Note:** Values greater than 1 increase the size, values between 0 and 1 decrease the size, and negative values flip the element along that axis.