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() a <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.

What is the transform scaleY function
What is the transform scaleY function

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;
  padding-bottom: 40px;
}

p{
  padding-top: 30px;
  margin-left: 10px;
}

Click on me to edit the code on codepen.io.

Specifications

W3C CSS Transforms Module Level 2
#two-d-transform-functions

Transform Functions