CSS - scale3d()

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

  • The scaling transformation is determined by a three-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 all the three 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.

Possible values

The function scale3d() accepts three values as parameter(s), that represents the amount of scaling to be applied in each direction.

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

  • sy: It is a <number> value that represents the ordinate (vertical, y-coordinate) of the scaling vector.

  • sz: It is a <number> value that represents the z-component of the scaling vector.

Syntax

transform: scale3d(sx, sy, sz);

CSS scale3d() - With or Without transform-origin Value

Following is an example of scale3d() function with and without transform-origin value given:

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

   .scaled-without-origin {
      background-color: pink;
      transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
   }

   .scaled-with-origin {
      background-color: lightgreen;
      transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
      transform-origin: right;
   }
</style>
</head>
<body>
   <section>
      <div>No function</div>
   </section>
   
   <section>
      <div class="scaled-without-origin">w/o transform-origin</div>
   </section>

   <section>
      <div class="scaled-with-origin">with transform-origin</div>
   </section>
</body>
</html>
Advertisements