The CSS scaleX() Function

This article demonstrates how to use the CSS scaleX function on elements with CSS transform. Included are code, definitions, and examples.

The scaleX function defines a [ sx, 1 ] scaling vector with the sx as the parameter. It allows a 2D transformation that changes the size of an HTML element along the x-axis or abscissa. The amount of scaling is determined by the sx linear scaling vector. For example, if sx = 0.5 or 1/2, the then element is going to be scaled down to one-half its size along the x-axis (horizontally). The scaling of the element is not preserved (isotropic) since the scaling is only done on the x-axis.

ScaleX() is a <transform-function> data type.

Take note that the scaleX(sy) has the same effect as several other CSS transforms, such as transform: scale(sx, 1); and transform: scale3d(sx, 1, 1).

If a negative value is supplied, the result scaling effect is a symmetry of its original position. This is called an axial symmetry, with the horizontal axis passing through the origin. The origin can be changed by using the transform-origin property.

You can achieve the same axial symmetry across several transform values by setting the value of sx to -1.

  • transform: rotateY(180deg);
  • transform: scale(-1, 1);
  • transform: scale3d(-1, 1, 1);

Syntax

transform: scaleX(sx);

The CSS transform scaleX is expressed as transform: scaleX(sx); with the sx parameter being replaced with a number or percent like transform: scaleX(0.2);.

Parameters

  • sx

The sx value of scaleX is a number or a percentage. Sx represents the x-axis or the abscissa of the scaling vector. This value changes the height along the x-axis.

When the value is greater than 1, the element grows along the x-axis, if the value is less than 1, it shrinks.

Examples

The examples below use numbers and percentage values for the parameter of the scaleX function.

transform: scaleX(1);     /* No effect */

transform: scaleX(0);     /* Not visable / disappear effect */

transform: scaleX(2)      /* A 2 scaling on x-axis */
transform: scaleX(0.65);  /* A 0.65 scaling on x-axis */
transform: scaleX(-3.6);  /* A -3.6 scaling with point reflection on x-axis */

transform: scaleX(6%)     /* A 6% scaling on x-axis. */
transform: scaleX(1.2);   /* A 1.2 scaling effect on x-axis. */

Usage

You can apply the scaleX function to any element or image by using CSS selectors.

#element-id {
  transform: scaleX(6);
}

.element-class {
  transform: scaleX(8.8%);
}

img {
  transform: scaleX(-0.5%);
}

Try It

Below, we show an example where we use scaleX to scale an element on the x-axis.

What is the transform scaleX function
What is the transform scaleX function

HTML

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

CSS

body {
  background: gray;
  color: white;
}

div {
  width: 120px;
  height: 120px;
  background-color: black;
  display: inline-block;
}

.scaled {
  transform: scaleX(0.6);
  background-color: red;
}

p  {
  font-family: cambria;
}

Click on me to edit the code on codepen.io.

Specifications

W3C CSS Transforms Module Level 2
#two-d-transform-functions

Transform Functions