CSS transform: scaleY()

The CSS scaleY() function is used to define the transform property, to scale (stretch/contract or resize) an element on y-axis. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 60px; height: 60px; background: peru; margin: auto;}
      div.b{transform: scaleY(0.2);}
      div.c{transform: scaleY(0.6);}
      div.d{transform: scaleY(1);}
      div.e{transform: scaleY(1.4);}
   </style>
</head>
<body>
   
   <h2>Without scaleY()</h2>
   <div class="a"></div>

   <h2>scaleY(0.2)</h2>
   <div class="b"></div>

   <h2>scaleY(0.6)</h2>
   <div class="c"></div>

   <h2>scaleY(1)</h2>
   <div class="d"></div>

   <h2>scaleY(1.4)</h2>
   <div class="e"></div>
   
</body>
</html>

Output

Without scaleY()

scaleY(0.2)

scaleY(0.6)

scaleY(1)

scaleY(1.4)

CSS scaleY() Syntax

The syntax of scaleY() function in CSS, is:

transform: scaleY(val);

The value of val may be a positive, zero, or a negative number. The scaleY(1) is the original sized element.

CSS Online Test

« Previous Tutorial Next Tutorial »