CSS - scale()

The scale() function in CSS is used to apply a scaling transformation (resizing) to an element on the two-dimensional plane. The function can resize the element horizontally and vertically at different scales, as the amount of scaling is defined by a vector [sx, sy]. The result is a <transform-function> datatype.

  • The scaling transformation is determined by a two-dimensional vector, whose coordinates specify how much scaling or resizing will be done in each direction.

  • The scaling will be uniform (isotropic) and the aspect ratio of the element will be preserved, when both the coordinates are equal. This form of scaling transformation is known as homothetic transformation.

  • In case the coordinate value is outside the [-1, 1] range, the element will grow in the dimension that is specified.

  • In case the coordinate value is inside the [-1, 1] range, the element will shrink in the dimension that is specified.

  • In case the coordinate value is negative, it results in point reflection in the specified dimension.

  • When the value is 1, it has no effect in the size of the element.

Scaling using the scale() function can only be done in a two-dimensional plane. In order to attain scaling in a three-dimensional plane, you need to use the scale3d() function.

Possible values

The function scale() can accept one or two values as parameter(s), that represents the amount of scaling to be applied in each direction.

  • sx: It is a <number> or <percentage> value that represents the abscissa (horizontal, x-coordinate) of the scaling vector.

  • sy: It is a <number> or <percentage> value that represents the ordinate (vertical, y-coordinate) of the scaling vector. When no value is specified for sy it defaults to the value of sx, which results in uniform scaling, preserving the element's aspect ratio.

Syntax

transform: scale(sx) | scale(sx, sy);

Accessibility concerns: The resizing or scaling of animations on a website is a problematic case for the user interface. So in case you want to include the scaling of animations on yur webpage, a control to the users be provided so that they can turn off the animations.

CSS scale() - Scaling the X and Y Dimensions Together

Following is an example where X and Y dimensions are passed together in the scale() function, where scale(0.6) is equivalent to scaleX(0.6) scaleY(0.6):

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-single-value {
      background-color: pink;
   }

   #xy:hover {
      transform: scale(0.6);
   }
   </style>
   </head>
   <body>
      <section>
         <p>No function</p>
         <div></div>
      </section>

   <section>
      <p>scale(0.6)</p>
      <div id="xy" class="scale-single-value"></div>
   </section>
   </body>
   </html>

CSS scale() - Scaling X and Y Dimensions Separately

In the following example the X and Y dimensions are passed separately, where scale(0.5, 0.8) is equivalent to scaleX(0.5) scaleY(0.8) and tranform-origin is set to right

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-double-value {
      background-color: lightgreen;
   }

   #x-y:hover {
      transform: scale(0.5, 0.8);
      transform-origin: right;
   }
   </style>
   </head>
   <body>
      <section>
         <p>No function</p>
         <div></div>
      </section>

   <section>
      <p>scale(0.5, 0.8)</p>
      <div id="x-y" class="scale-double-value"></div>
   </section>
   </body>
   </html>
Advertisements