Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use CSS scale() to Resize Elements Responsively

The CSS transform property is a fundamental tool in web development that enables users to change the appearance and position of elements on the web page. This CSS property is a powerful tool that alters or transforms elements by rotation, scale, skew, etc.

In this article, you learn all there is to know about the CSS transform property and how to make use of some of these properties, such as scale() to resize the dimension of an element.

Let’s dive right in 🚀

Understanding the CSS scale() Function

The CSS scale() function is a CSS transform property that scales an element in two-dimensional (2D) space. It allows you to resize an element by increasing or decreasing its size by a specified scaling factor. A transform function takes in a number representing the scaling factor.

The scale() accepts two arguments, i.e., the x and y axes. Using the scale() property, you can resize(scale) an item either on the x-axis, y-axis, or simultaneously (both axes), and this helps provide you with greater flexibility and control over the web content on the web page and the second parameter scales it along the y axis. Both parameters can be any valid number value.. Also, in scaling an element, you can use either a positive value or a negative value.

The scale value of 1 is the normal/default value-size of an element.

The transform-origin property in CSS plays an important role when scaling elements because it helps determine the point around which an element is scaled, rotated, or transformed.

The four basic 2D transform functions — rotate, skew, scale, and translate.

Image source: HTMLDog

Syntax for the Transform Property

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Accessibility Considerations for Scaling Animations

Due to individual conditions/disabilities, ensuring Accessibility while scaling animations is very crucial as it provides a visually appealing interface of the web page, which helps individuals with disabilities of any kind to easily read and understand the contents of the web page.

Scaling Uniformly Along the X and Y-axis

You can scale both the vertical and horizontal (X and Y) axis of an element uniformly. You can achieve this by setting just one value to the scale function of a particular element.

Here is an Example;

<body>
    <p>First Scale box</p>
    <p class="box2">Second Scale box</p>
</body>

CSS;

p {
  background-color: #0000ff;
  color: #ffff;
  transform: scale(1);
  width: 100px;
  height: 100px;
  margin: 50px;
  transform: scale(1.5);
}

.box2{
  transform: scale(.7);
}

From the code example above, a scale of 1.5, which is equivalent to 50%, is added to the p tag, i.e. both the horizontal and vertical axes of the p tag have a uniform scale. The same is done for the box2 class element, which has a scale of .7.

Uniform Scaling

As previously stated, in scaling, you can scale an element with either a positive or a negative value. Setting a scale value of an element to negative transforms the element in an inverse position. Here is an example;

<body>
    <p>First Scale box</p>
    <p class="box2">Second Scale box</p>
</body>

  p {
      background-color: #0000ff;
      color: #ffff;
      transform: scale(1);
      width: 100px;
      height: 100px;
      margin: 50px;
      transform: scale(-1.5);
  }

  .box2 {
    transform: scale(-0.7);
  }

Uniform Scaling

AI is taking the world by storm, and so are we. We are not left behind. That is we at Purecode AI have simplified how to build websites or web applications. You no longer have to spend countless hours writing codes for different parts of your software. Check out how we have simplified the process of programming with AI. 🚀

Purecode AI homepage

transform-origin Property

As stated at the start of this article, the ‘transform-origin` property is a CSS tool that plays an important role when scaling elements because it helps determine the point around which an element is scaled, rotated, or transformed. This property allows you to specify the location origin of the transform. In most cases is regarded as the center point of the transforming element.

By default, the center of an element is in the middle, but with the use of the transform-origin property, you can alter the point of origin of the transformation of an element. This property is used together with the transform property, letting you change the point of origin of a transformation.

The transform-origin has five keyword values which are; right, left, top, bottom, and center. These keyword values can be used to change the behavior of the element you want to transform.

Example

Here is an example of how the transform-origin property works.

<body>
   <div class="box">Box 1</div>
   <div class="box b2">Box 2</div>
</body>

.box {
  background-color:#8a2be8;
  color: #ffff;
  border-radius: 10px 30%;
  width: 100px;
  height: 100px;
  margin: 100px auto;
  transition: transform 4s;
  text-align: center;
}

.box: hover {
  transform: rotate(720deg);
}
.b2 {
  background-color: #0000ff;
  transform-origin: right bottom;
}

From the code example above, a rotate() function is used to explain the transform-origin property properly. Two div tags were created in the HTML file with the class names box and b2. In the CSS file, the box class was set that whenever you hover on it should rotate to 720deg, i.e. transform: rotate(720deg); then, in the b2 class element, the transform-origin property was set to a keyword value of right and bottom i.e. transform-origin: right bottom.

The image above shows how code works. You can see their behavior when you hover over any of the elements. Remember, the center of an element is always in the middle; therefore, if you hover over box 1, you can see that it still retains its position (rotating in the center). The same cannot be said for the Box 2 element.

This is because the center of the element has already been altered using the transform-origin property and was set to a keyword value of right and bottom, meaning that instead of the Box 2 element rotating from the middle, it rotates from the lower right bottom.

Scaling Non-uniformly Along the X and Y-axis

Just as it is possible to scale an element uniformly along the horizontal and vertical axes (X and Y-axis) using one value, it is also possible to scale the same element non-uniformly along the x and y-axis using different values.

Scaling an element non-uniformly simply means that you are independently adjusting the dimensions along the horizontal (X-axis) and the vertical (Y-axis) axes. This might result in the dimension of an object being distorted.

Here is an example;

<body>
  <h2>List of food items</h2>
    <ul>
      <li id="scaled">Rice</li>
      <li>Bread</li>
      <li>Potatoes</li>
      <li>Pepper</li>
      <li>Ice Cream</li>
      <li>Plantain</li>
      <li>Bean</li>
      <li>Grapes</li>
    </ul>
</body>

ul {
  margin: 5px;
}

ul li {
  padding: 3px;
  cursor: pointer;
}

ul li:hover {
  background-color: #ad7575;
}

#scaled:hover {
  transform: scale(1, 2.5);
}

From the example above, you can see how non-uniform scaling functions. When a non-uniform scale was added to the first element with the class of scaled, it behaved differently from the rest of the elements.

Non-uniform scaling can also be applied in other situations. Here is another example of this scaling property.

📝Note: If you pass in more than one value (two values) to the scale function, the first value will represent the scale factor on the horizontal (X-axis), while the second value will represent the scale factor on the vertical (Y-axis).

That means that from the example above, 1 represents the scale value of the element in the horizontal (X) axis while 2.5 represents the scale value of the same element in the vertical (Y) axis.

Scaling Along Only the X-axis

The scaleX() function is used to increase or decrease the width of an element. Scaling an element by the x-axis helps resize the element horizontally without changing/affecting its height or position on the web page.

This is useful when creating responsive, good-looking, functioning websites that can adapt seamlessly to various screen sizes or devices.

To achieve this, you can set the element’s transform property to scaleX() and specify the desired scaling factor.

Examples;

p {
  transform: scaleX(0.75);
}

From the code above, scaleX(0.75). This means that the horizontal div element axis of the p tag is increased by a scale property of 0.75.

Here is a practical example of how scaling an element along the X-axis works.

<body>
  <div>
    <p class="first_s">first scaling</p>
    <p class="second_s">second scaling</p>
    <p class="third_s">third scaling</p>
    <p class="fourth_s">fourth scaling</p>
    <p class="fifth_s">fifth scaling</p>
  </div>
</body>

p {
  background-color: #8a2be8;
  margin: 20px auto;
  width: 100px;
  height: 100px;
  text-align: center;
}

.first_s {
  transform: scaleX(0.5);
}

.second_s {
  background-color: #7fffd7;
  transform: scaleX(0.75);
}

.third_s {
  background-color: #000ff0;
  transform: scaleX(1.5);
}

.fourth_s {
  background-color: #a52aa5;
  transform: scaleX(2);
}

.fifth_s {
  background-color:#7fff00;
  transform: scaleX(2.5);
}

Scaling Along Only the Y-axis

On the other hand, the scaleY() function increases or decreases the height of an element. Scaling an element vertically (Y-axis) helps you make good use of the screen width, which enables you to create a more visually appealing layout.

Scaling an element in the Y-axis is also a technique used to resize an element vertically without changing any other dimension of the element. You can achieve this by setting the element’s transform property to scaleY() and specifying the desired scaling factor.

Example;

div {
  transform: scaleY(0.75)
}

The vertical axes (Y-axis) of an element can also be resized the same way as the horizontal axis. The example above shows how you can use the scaleY() to resize an element.

You can scale an element using other CSS-provided measurements such as percentages (%), etc. When applied to an element’s vertical (Y-axis) axis, it either increases or decreases the vertical sides of the element.

Using the above example, a scale of 0.75 is an equivalent of 75 in percentage. Therefore, the example above can also be expressed as;

div {
  transform: scaleY(75%);
}

It is important to note that the scaleX() function only applies to the width or horizontal size of an element and does not alter the height of the element, while scaleY() only applies/modifies the element’s height or vertical size without affecting its width.

CSS scale() Function Vs. scale Property

Although the scale() function and the scale property in CSS are both used for scaling elements in a web page and are all part of the transform property, there are certain situations when you make use of any of these properties.

scale Property

The scale property is used to increase or decrease the size of an element either vertically, horizontally, or in a uniform manner. This property is applied directly to the element you want to scale.

Example;


<div class="s3"></div>

.s3 {
  transform: scale(1.5)
}

The example shows that the scale property was added directly to the element that needed to be scaled.

scale Function

Just like the scale property, the scale function is also a part of the transform property and is used in scaling elements either in vertical, horizontal, or uniform directions. One of the key differences between these two transform properties is that the scale function is used within the context of animations or transition properties to change the behavior of the elements it’s applied to.

Here is an example;

.s3 {
  transition: transform 3s ease-in-out;
}

.s3:hover {
  transform: scale(2)
}

The example shows that the scale function was not applied directly to the element, unlike that of the scale property. The transition property applied directly to the element will alter the element’s behavior and cause it to behave differently whenever you hover over it.

Transformation Matrix Order for the CSS transform Property

The matrix() function is part of the CSS transform property that defines a homogeneous 2D transformation matrix comprising six parameters. This property combines all the 2D transform methods into one, containing mathematical functions that allow you to rotate, scale, translate, and skew elements.

The six parameters includes; matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Here is an example of how to use the matrix function.

.box3 {
  background-color: #8a2be8;
  margin: 100px auto;
  width: 500px;
  transition: 6s ease all;
  transform: matrix(1, 0, 0, 1, 0, 0)
}

Above is an example of how to use the matrix() function. From the example, each value contained in the bracket represents a particular CSS transform property.

The first value of the matrix function represents the scaleX(), which increases or decreases the element along the X-axis. It is important to note that you cannot set the value of the scaleX() to 0; if you do, the element will disappear completely.

The second value of the matrix function represents the skewY(). This property skews an element along the Y-axis. The next value represents skewX(), which skews an element along the X-axis.

The fourth value represents the scaleY() property. Just as in scaleX(), you cannot set the scaleY() value to 0 because the element will disappear.

The next value represents translateX(), and this is used to shift the position of an element along the Y-axis. Meanwhile, the last value stands for translateY() and is used to shift the position of an element along the Y-axis.

If you prefer to learn through video, I have included a YouTube video below:

Equivalent of scale() using scale Property

You can scale an element non-uniformly using a scale property. Here is how you can achieve it;

.box4 {
  transform: scaleX(1.5) ScaleY(0.5);
}

The example above will give you the same result as when you use scale (1.5, 0.5). The scaleX() and scaleY() are individual functions within the transform property that can be used to control the scaling of the horizontal (x-axes) and vertical (y-axes), respectively.

Here is a practical example;

<body>
  <nav>
    <ul>
      <li><a href="#" class="first_nav">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Company</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</body>

nav {
background-color: #808088;
}

nav ul {
  margin: 5px;
  display: flex;
  list-style: none;
}

nav ul li {
 padding: 10px;
 display: flex;
}
nav ul li a {
  text-decoration: none;
  color: #ffff;
  text-align: center;
  padding: 10px;
}

none Value

Just as we can use the scale property to resize the width and height of an element, the none property can be used to prevent that from happening. By setting an element’s transform property to none, the width or height of that particular element cannot be resized even after you have added the scaling command to such an element.

Here is an example;

.box5 {
  background-color:#8a2be8;
  width: 100px;
  height: 50px;
  transform: scale(1.5, 0.5);
  transition: transform 5s ease-in-out;
}

.box5 {
  transform: none;
}

FAQs

What is the Function Scale() in CSS

The scale() function in CSS allows you to resize an element by increasing or decreasing its size by the specified scaling factor. It’s a transform function that takes in a number representing the scaling factor.

How Do You Scale Up an Element in CSS

To scale up an element in CSS, you use the scale() function and pass in a value greater than 1, like scale(1.5), to increase the size by 150%.

What is the Default Scaling Value in CSS Transform

The default scaling value is 1. Using scale(1) will not apply any scaling transformation to the element.

What Does Transform: Scale(0) Do in CSS

Using a value of 0 with scale() in CSS will collapse the element to have zero width and height, making it invisible.

How to Do You Proportionally Resize Elements in CSS

To proportionally resize an element, pass the same scaling factor value for both X and Y to the scale() function, like scale(1.5, 1.5). This will increase the width and height by the same amount.

How Do You Apply Scaling Transformation in CSS

The scale() function is used along with the transform property. For example:

transform: scale(2);

This will double the size of the element.

When Should You Use Scale() in CSS

The scale() function is useful for responsive design, animations, scaling SVG icons, zooming effects, fitting elements in containers, and more. It provides an alternative to setting width/height.

Different Ways to Use the CSS Scale() Function to Resize Elements Responsively

Scale MethodDescriptionExample
Uniform ScalingScales width and height by the same amounttransform: scale(1.5);
Non-Uniform ScalingScales width and height by different amountstransform: scale(1.5, 0.5);
ScaleXScales only the widthtransform: scaleX(2);
ScaleYScales only the heighttransform: scaleY(0.5);
With TransitionAdd animation when scaling on the event.box { transition: transform 0.3s; }.box:hover { transform: scale(1.2); }
With Media QueryThe scale at different breakpoints@media (max-width: 600px) {.box { transform: scale(0.8); }}
Transform OriginChange point of scaletransform-origin: 0 0;
Scale to FitScale to fit parent containerimg { width: 100%;transform: scale(1.5); }
Scale SVGScale SVG graphics responsivelysvg { transform: scale(2); }

If you are working on a CSS project, and you want to be 5x more productive, you want to skip the boring part of writing each piece of code yourself, check out our AI-generated custom components for CSS. This allows you to quickly get started on your project.

What You Have Learned

The CSS scale() property or function is part of the transform property that allows you to resize an element by increasing or decreasing its size by a specified scaling factor.

It accepts two arguments, i.e., the x and y axes. Using the scale() property, you can resize(scale) an item either on the x-axis, y-axis, or simultaneously (both axes), and this helps provide you with greater flexibility and control over the web content on the web page.

The transform-origin property in CSS plays an important role when scaling elements because it helps determine the point around which an element is scaled, rotated, or transformed.

By default, the center of an element is in the middle, but with the use of the transform-origin property, you can alter the point of origin of the transformation of an element. This property is used together with the transform property, letting you change the point of origin of a transformation.

Uniform scaling resizes the element of the web page equally, i.e. the X-axis and the Y-axis will all be resized equally, while in non-uniform scaling, each axis of the element has its value, i.e., the X-axis is resized differently while Y-axis is resized differently as well. If you pass in more than one value (two values) to the scale function, the first value will represent the scale factor on the horizontal (X-axis), while the second value will represent the scale factor on the vertical (Y-axis).

In addition to the points above, the matrix() function is part of the CSS transform property that defines a homogeneous 2D transformation matrix that consists of six parameters. This property combines all the 2D transform methods into one, containing mathematical functions that allow you to rotate, scale, translate, and skew elements.

Further Readings

Check out these articles to learn more about the awesomeness of CSS:

Check out this video tutorial on CSS Transitions Tutorial

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.