scale3d()

{{CSSRef}} 

The scale3d() CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales. Its result is a {{cssxref("<transform-function>")}}  data type.

{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} 

This scaling transformation is characterized by a three-dimensional vector. Its coordinates define how much scaling is done in each direction. If all three coordinates are equal, the scaling is uniform (isotropic) and the {{glossary("aspect ratio")}}  of the element is preserved (this is a homothetic transformation).

When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect.

Syntax

The scale3d() function is specified with three values, which represent the amount of scaling to be applied in each direction.

scale3d(sx, sy, sz)

Values

• sx
  • : Is a {{cssxref("<number>")}}  representing the abscissa (horizontal, x-component) of the scaling vector.
• sy
  • : Is a {{cssxref("<number>")}}  representing the ordinate (vertical, y-component) of the scaling vector.
• sz
  • : Is a {{cssxref("<number>")}}  representing the z-component of the scaling vector.

Formal syntax

{{CSSSyntax}} 

Examples

Without changing the origin

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}

Result

{{EmbedLiveSample("Without_changing_the_origin","200","200")}} 

Translating the origin of the transformation

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}

Result

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}} 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• {{cssxref("transform")}} 
• {{cssxref("<transform-function>")}} 
• scaleZ()
• translate3d()
• rotate3d()
• Individual transform properties:
  • {{cssxref("translate")}} 
  • {{cssxref("scale")}} 
  • {{cssxref("rotate")}}