# The CSS scaleY() Function

This article demonstrates how to use the CSS scaleY function on elements with CSS transform. Included are code, definitions, and examples.

The scaleY function defines a [ 1, `sy` ] scaling vector with the `sy` as the parameter. It allows a 2D transformation that resizes an HTML element along the y-axis or ordinate. The amount of scaling is determined by the `sy` linear scaling vector parameter. For example, if `sy` = 5, then the element is going to be scaled on the y-axis 5 times its original size along the axis (vertically). The scaling of the element is not preserved (isotropic) since the scaling is only done on the y-axis.

`ScaleY()``<transform-function>` data type.

Take note that the `scaleY(sy)` has the same effect as several other CSS transforms, such as `transform: scale(1, sy);` and `transform: scale3d(1, sy, 1)`.

If a negative value is supplied, the result scaling effect is a symmetry of its original position. This is called an axial symmetry, with the horizontal axis passing through the origin. The origin can be changed by using the transform-origin property.

You can achieve the same axial symmetry across several transform values by setting the value of `sy` to -1.

• `transform: rotateX(180deg);`
• `transform: scale(1, -1);`
• `transform: scale3d(1, -1, 1);`

## Syntax

``transform: scaleY(sy);``

The CSS transform scaleY is expressed as `transform: scaleY(sy);` with the `sy` parameter being replaced with a number or percent like `transform: scaleY(1.9);`.

## Parameters

• `sz`

The `sy` value of scaleY is a number or a percentage. Sy represents the y-axis or the ordinate of the scaling vector. This value changes the height along the y-axis.

When the value is greater than 1, the element grows along the y-axis, if the value is less than 1, it shrinks.

## Examples

The examples below use numbers and percentage values for the parameter of the scaleY function.

``````transform: scaleY(1);     /* No effect */

transform: scaleY(0);     /* Not visable / disappear effect */

transform: scaleY(5)      /* A 5 scaling on z-axis */
transform: scaleY(2.1);   /* A 2.1 scaling on z-axis */
transform: scaleY(-5);    /* A -5 point reflection on y-axis. */

transform: scaleY(8%)     /* A 8% scaling on z-axis */
transform: scaleY(3.4);   /* A 3.4 scaling z-axis. */``````

## Usage

You can apply the scaleY function to any element or image by using CSS selectors.

``````#element-id {
transform: scaleY(4);
}

.element-class {
transform: scaleY(5);
}

img {
transform: scaleY(-2);
}``````

## Try It

Below, we show an example where we use scaleY to scale an element on the y-axis.

HTML

``````<div>
<p>Normal</p>
</div>
<div class="scaled">
<p>Scaled HTML Element</p>
</div>``````

CSS

``````body {
background: gray;
}

div {
width: 80px;
height: 80px;
background-color: red;
color: white;
}

.scaled {
transform: scaleY(0.6);
background-color: blue;
}

p{