diff --git a/content/css/concepts/transform-functions/terms/scaleZ/scaleZ.md b/content/css/concepts/transform-functions/terms/scaleZ/scaleZ.md new file mode 100644 index 00000000000..760c7a6d2ff --- /dev/null +++ b/content/css/concepts/transform-functions/terms/scaleZ/scaleZ.md @@ -0,0 +1,264 @@ +--- +Title: 'scaleZ()' +Description: 'Resizes an element along the z-axis in 3D space' +Subjects: + - 'Web Design' + - 'Web Development' +Tags: + - 'Animation' + - 'CSS' + - 'Functions' + - 'Transform' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' +--- + +The **`scaleZ()`** function is a CSS transform function that resizes an element along the z-axis in 3D space. It modifies the depth of an element by scaling its z-coordinate, which is only visible when the element is positioned in a 3D context with perspective applied. + +## Syntax + +```pseudo +transform: scaleZ(z); +``` + +**Parameters:** + +- `z`: A number or percentage representing the scaling factor to apply along the z-axis. A value of `1` leaves the element unchanged, values greater than `1` increase the depth, and values between `0` and `1` decrease the depth. Negative values create a reflection along the z-axis. + +**Return value:** + +The `scaleZ()` function returns a `` data type that can be used with the `transform` property. + +## Example 1: Basic `scaleZ()` Usage + +This example demonstrates basic z-axis scaling with perspective to visualize the effect. The HTML code is: + +```html + + + + + Basic scaleZ Example + + +
+
Original
+
Scaled Z
+
+ + +``` + +The CSS code is: + +```css +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.container { + perspective: 500px; + display: flex; + gap: 50px; +} + +.box { + width: 150px; + height: 150px; + background-color: #3498db; + color: white; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; + font-weight: bold; +} + +.original { + transform: rotateY(45deg); +} + +.scaled { + transform: rotateY(45deg) scaleZ(2); + background-color: #e74c3c; +} +``` + +This example results in the following output: + +![Two boxes are displayed side by side. The left box (Original) is rotated 45 degrees along the y-axis. The right box (Scaled Z) is rotated 45 degrees and scaled 2x along the z-axis, making it appear stretched in depth when viewed from the perspective angle.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scalez1.png) + +## Example 2: 3D Card Flip with `scaleZ()` + +This example shows how `scaleZ()` can be used to create depth effects in a 3D card flip animation. The HTML code is: + +```html + + + + + 3D Card Flip + + +
+
+
Front Side
+
Back Side
+
+
+ + +``` + +The CSS code is: + +```css +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #2c3e50; +} + +.card-container { + perspective: 1000px; +} + +.card { + width: 300px; + height: 200px; + position: relative; + transform-style: preserve-3d; + transition: transform 0.6s; +} + +.card:hover { + transform: rotateY(180deg); +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + font-weight: bold; + border-radius: 10px; + transform: scaleZ(1.5); +} + +.card-front { + background-color: #3498db; + color: white; +} + +.card-back { + background-color: #e74c3c; + color: white; + transform: rotateY(180deg) scaleZ(1.5); +} +``` + +This example results in the following output: + +![A card is displayed that flips when hovered. The scaleZ() function adds depth to both the front and back faces of the card, making the 3D flip effect more pronounced and visually appealing.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scalez2.gif) + +## Example 3: 3D Image Gallery with `scaleZ()` + +This example demonstrates using `scaleZ()` to create a 3D image gallery with depth effects. The HTML code is: + +```html + + + + + 3D Image Gallery + + +
+
Image 1
+
Image 2
+
Image 3
+
+ + +``` + +The CSS code is: + +```css +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.gallery { + perspective: 800px; + display: flex; + gap: 30px; +} + +.image-box { + width: 180px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 20px; + font-weight: bold; + border-radius: 8px; + transition: transform 0.3s ease; + transform-style: preserve-3d; +} + +.box1 { + background-color: #ff6b6b; + transform: rotateY(-15deg) scaleZ(1.2); +} + +.box2 { + background-color: #4ecdc4; + transform: scaleZ(1.5); +} + +.box3 { + background-color: #ffd93d; + transform: rotateY(15deg) scaleZ(2); +} + +.image-box:hover { + transform: rotateY(0deg) scaleZ(2.5) translateZ(50px); +} +``` + +This example results in the following output: + +![Three colored boxes are displayed in a row with different depth levels created by scaleZ(). Each box has a different z-axis scale factor, creating a layered 3D effect.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scalez3.gif) + +## Frequently Asked Questions + +### 1. What is z scale in CSS? + +Z scale refers to scaling an element along the z-axis in 3D space, modifying depth. It becomes visible when combined with other 3D transforms and perspective. + +### 2. What does transform scale do in CSS? + +Transform scale resizes elements along different axes. While `scale()`, `scaleX()`, and `scaleY()` work in 2D, `scaleZ()` scales along the z-axis in 3D space. + +### 3. What is the z scale used for? + +Z scale is used for creating 3D effects like card flips, interactive galleries, parallax effects, and depth-based animations when combined with other 3D transforms. diff --git a/media/scalez1.png b/media/scalez1.png new file mode 100644 index 00000000000..32934675664 Binary files /dev/null and b/media/scalez1.png differ diff --git a/media/scalez2.gif b/media/scalez2.gif new file mode 100644 index 00000000000..b331db6a82a Binary files /dev/null and b/media/scalez2.gif differ diff --git a/media/scalez3.gif b/media/scalez3.gif new file mode 100644 index 00000000000..d580e699004 Binary files /dev/null and b/media/scalez3.gif differ