diff --git a/content/css/concepts/transform-functions/terms/scaleY/scaleY.md b/content/css/concepts/transform-functions/terms/scaleY/scaleY.md new file mode 100644 index 00000000000..856b85fb7d3 --- /dev/null +++ b/content/css/concepts/transform-functions/terms/scaleY/scaleY.md @@ -0,0 +1,233 @@ +--- +Title: 'scaleY()' +Description: 'Resizes an element along the y-axis.' +Subjects: + - 'Web Design' + - 'Web Development' +Tags: + - 'Animation' + - 'CSS' + - 'Functions' + - 'Transform' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' +--- + +The **`scaleY()`** function is a CSS transform function that resizes an element along the y-axis. It modifies the height of an element by scaling its vertical dimension. + +## Syntax + +```pseudo +transform: scaleY(y); +``` + +**Parameters:** + +- `z`: A number or percentage representing the scaling factor to apply along the y-axis. A value of `1` leaves the element unchanged, values greater than `1` increase the height, and values between `0` and `1` decrease the height. Negative values create a vertical reflection. + +**Return value:** + +The `scaleZ()` function returns a `` data type that can be used with the `transform` property. + +## Example 1: Scaling a Box Vertically + +In this example, the height of a box is scaled along the y-axis to create a stretched effect. The HTML code is: + +```html + + + + + ScaleY Box Example + + +
+
Small
+
Tall
+
+ + +``` + +The CSS code is: + +```css +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f8f8f8; +} + +.container { + display: flex; + gap: 40px; +} + +.box { + width: 120px; + height: 120px; + background-color: #3498db; + color: white; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + font-weight: bold; +} + +.small { + transform: scaleY(0.8); + background-color: #2ecc71; +} + +.tall { + transform: scaleY(1.8); + background-color: #e67e22; +} +``` + +This example results in the following output: + +![Two boxes displayed side by side. The left box labeled ‘Original’ is normal height, while the right box labeled ‘Scaled Y’ is stretched taller along the vertical axis, showing the effect of scaleY.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scaleY1.png) + +## Example 2: Animated Button Grow on Hover + +In this example, a button grows taller along the y-axis when hovered over. The HTML code is: + +```html + + + + + ScaleY Button Animation + + + + + +``` + +The CSS code is: + +```css +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #ecf0f1; +} + +.btn { + width: 150px; + height: 50px; + font-size: 18px; + font-weight: bold; + background-color: #3498db; + color: white; + border: none; + border-radius: 8px; + transition: transform 0.4s ease; +} + +.btn:hover { + transform: scaleY(1.5); +} +``` + +This example results in the following output: + +![A 3D card displayed that flips when hovered. The front and back faces are scaled taller along the Y-axis, enhancing the vertical depth effect during the flip animation.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scaleY2.gif) + +## Example 3: Image Column Stack with Vertical Scaling + +In this example, images are stacked and scaled vertically to create a layered effect. The HTML code is: + +```html + + + + + Vertical Image Stack + + +
+
1
+
2
+
3
+
+ + +``` + +The CSS code is: + +```css +body { + display: flex; + justify-content: center; + align-items: flex-end; + height: 100vh; + background: linear-gradient(120deg, #6a11cb, #2575fc); +} + +.image-stack { + display: flex; + gap: 20px; + align-items: flex-end; +} + +.image-box { + width: 80px; + height: 80px; + background-color: #ff6b6b; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 18px; + font-weight: bold; + border-radius: 6px; + transition: transform 0.3s ease; +} + +.box1 { + transform: scaleY(1.1); + background-color: #ff6b6b; +} + +.box2 { + transform: scaleY(1.5); + background-color: #4ecdc4; +} + +.box3 { + transform: scaleY(2); + background-color: #ffd93d; +} + +.image-box:hover { + transform: scaleY(2.3); +} +``` + +This example results in the following output: + +![Three colored boxes arranged in a row with different vertical scales using scaleY. Each box has a distinct height, creating a layered 3D vertical effect, and they grow taller when hovered.](https://raw.githubusercontent.com/Codecademy/docs/main/media/scaleY3.gif) + +## Frequently Asked Questions + +### 1. What is transform scale in CSS? + +Transform scale resizes elements along different axes. `scaleY()` specifically scales the element vertically. + +### 2. What does transform translateY(-50%) mean? + +It moves an element up by 50% of its own height relative to its current position. + +### 3. What is scaleY? + +ScaleY is a CSS transform that stretches or compresses an element along the vertical axis. diff --git a/media/scaleY1.png b/media/scaleY1.png new file mode 100644 index 00000000000..e91f22a48a7 Binary files /dev/null and b/media/scaleY1.png differ diff --git a/media/scaleY2.gif b/media/scaleY2.gif new file mode 100644 index 00000000000..da11dd34f31 Binary files /dev/null and b/media/scaleY2.gif differ diff --git a/media/scaleY3.gif b/media/scaleY3.gif new file mode 100644 index 00000000000..c500234ac8b Binary files /dev/null and b/media/scaleY3.gif differ