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>
      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);}
   <h2>Without scaleY()</h2>
   <div class="a"></div>

   <div class="b"></div>

   <div class="c"></div>

   <div class="d"></div>

   <div class="e"></div>

Without scaleY()





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 »

Liked this post? Share it!