The scale() function is an inbuilt function which is used to resize the element in 2D plane. It scales the elements in horizontal and vertical directions.
Syntax:
scale( sx )
or
scale( sx, sy )
Parameters:
- sx: It resizes the elements in horizontal plane.
- sy: It resizes the elements in vertical plane. If value of sy is not defined then the resize the element sx in both direction (horizontal and vertical).
Below examples illustrate the scale() function in CSS:
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS scale() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.scale_image {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS scale() function</h2>
<br><br>
<img class="scale_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Output:
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS scale() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
transform: scale(1, 2);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS scale() function</h2>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
Output:
Supported Browsers: The browsers supported by scale() function are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 9
- Firefox 3.5
- Safari 3.1
- Opera 10.5
CSS scale() Function – FAQs
What does the scale() function do in CSS?
The scale() function is used with the transform property to resize an element by scaling it up or down along the X, Y, or both axes.
How do you use the scale() function in CSS?
Use transform: scale(x, y); to scale an element, where x and y are scaling factors along the X and Y axes, respectively.
Can scale() be used to scale only one axis?
Yes, you can scale only one axis by specifying one factor, such as scaleX(2) or scaleY(1.5).
What are the common uses of the scale() function?
The scale() function is used for effects like zooming images, enlarging text, creating hover effects, or scaling UI components responsively.
Does scaling an element affect the surrounding layout?
Scaling does not affect the flow of other elements, as it only changes the appearance of the element without altering its actual size in the document layout.