CSS - scaleY()

Quiz

The scaleY() function in CSS used to apply a scaling transformation (resizing) to an element along the vertical (Y-axis) dimension. The result is a <transform-function> datatype.

The function modifies the ordinate (vertical, Y-coordinate) of element point by a constant factor. When the scale factor is 1, the function gets identity transform. scaleY(-1) specifies an axial symmetry, where the horizontal axis passes through the transform origin.

Possible Values

The function scaleY() accepts a single parameter.

s: A number, representing the scaling factor to be applied on the ordinate (vertical, y-coordinate) of each point of the element.

Syntax

transform: scaleY(s);

CSS scaleY() - Positive and Negative Values

Following is an example of scaleY() function with positive and negative values as parameter:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-image: url(images/logo.png);
      margin-bottom: 1em;
   }

   section {
      outline: 2px solid blue;
      width: 150px;
      height: max-content;
   }

   .scale-y-positive {
      background-image: url(images/logo.png);
      transform: scaleY(0.8);
   }

   .scale-y-negative {
      background-image: url(images/logo.png);
      transform: scaleY(-0.4);
   }

   .scale-y-one {
      background-image: url(images/logo.png);
      transform: scaleY(1);
   }

   .scale-y-int {
      background-image: url(images/logo.png);
      transform: scaleY(1.5);
   }
</style>
</head>
<body>
   <section>
      <p>No function</p>
      <div></div>
   </section>
   <section>
      <p>scaleY(-0.4)</p>
      <div class="scale-y-negative"></div>
   </section>
   <section>
      <p>scaleY(0.8)</p>
      <div class="scale-y-positive"></div>
   </section>
   <section>
      <p>scaleY(1)</p>
      <div class="scale-y-one"></div>
   </section>
   <section>
      <p>scaleY(1.5)</p>
      <div class="scale-y-int"></div>
   </section>
</body>
</html>

Print Page