Open In App

CSS scale() Function

Last Updated : 30 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

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.



Previous Article
Next Article

Similar Reads

How to stretch and scale background image using CSS?
The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: This property value is used to stretch the background
2 min read
Tailwind CSS Scale
This class accepts lots of value in tailwind CSS in which all the functional properties are covered in class form. This class is used to resize the element in the 2D plane. It scales the elements in horizontal and vertical directions. In CSS, we can do that by using the CSS scale() function. Scale classes: scale-0|50|75|90|95|100|105|110|125|150: T
1 min read
Primer CSS Scale in Animation
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Primer CSS Typography Type scale Utilities
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Primer CSS Typography Type Scale
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, an
2 min read
Primer CSS Extended Spacing Scale
Primer CSS is a free open-source CSS framework built on technologies that provide insights into key design elements like space, typeface, and color. This methodical approach guarantees that the patterns are both consistent and compatible. It's primarily useful and adaptable. It was made with the help of the GitHub design system. Its CSS approach is
3 min read
Primer CSS Spacing Scale
Primer CSS is a free open-source CSS framework based on technologies that provide insights into important style aspects like space, font, and color. This meticulous methodology ensures that its patterns are both stable and compatible. It's mostly practical and adaptable. It was created using the GitHub design system. Object-oriented CSS foundations
3 min read
How to add scale animation on hover using Tailwind CSS in React ?
In this article, we'll see how to add scale animation on hover using tailwind CSS in a ReactJS app. The hover effect appears when a user positions the cursor over an element. In tailwind CSS, the scale utility class helps in getting the zoom effect over an element.  PrerequisitesReact JSTailwind CSSApproach to Add Scale AnimationTo add scale animat
3 min read
PHP | ImagickDraw scale() Function
The ImagickDraw::scale() function is an inbuilt function in PHP which is used to adjust the scaling factor to apply in the horizontal and vertical directions to the current coordinate space. Syntax: bool ImagickDraw::scale( $x, $y ) Parameters: This function accepts two parameter as mentioned above and described below: $x: This parameter is used to
2 min read
PHP | GmagickDraw scale() Function
The GmagickDraw::scale() function is an inbuilt function in PHP which is used to set the scaling factor and apply it to the horizontal and vertical directions to the current coordinate space.Syntax: public GmagickDraw::scale( $x, $y ) : GmagickDraw Parameters: This function accepts two parameter as mentioned above and described below: $x: This para
2 min read
PHP | ImagickKernel scale() Function
The ImagickKernel::scale() function is an inbuilt function in PHP which is used to scale the given kernel list by the given amount. Syntax: void ImagickKernel::scale( float $scale, int $normalizeFlag ) Parameters: This function accept two parameters as mentioned above and described below: $scale: It specifies the amount of scale. $normalizeFlag: It
2 min read
Node.js GM scale() Function
The crop() function is an inbuilt function in the GraphicsMagick library that allows you to resize images. The function returns the true value on success. Syntax: crop(width, height) Parameters: This function accepts two parameters as mentioned above and described below: width: This parameter is used to specify the width from which the image is to
2 min read
p5.js scale() Function
The scale() function in p5.js is used to increase or decrease the size of a shape or model by expanding or contracting its vertices. The scale values are specified as decimal percentages, that is, a scale value of "2.0" would increase the dimensions of the shape by 200%. Similarly, a negative of "-2.0" would decrease the dimensions of the shape by
3 min read
D3.js axis.scale() Function
The d3.axis.scale() Function in D3.js is used to sets the scale and return the axis. If this function is not provided with a specified scale, returns the current scale. Syntax: axis.scale([scale]) Parameters: This function accepts only a single parameter as mentioned above and described below: scale: This parameter is an optional parameter and it h
2 min read
D3.js transform.scale() Function
The transform.scale() function in D3.js library is used to get the transformation whose scale k₁ is equal to k₀k, where k₀ is the transform’s scale. Syntax: transform.scale(k)Parameters: This function accepts a single parameter as mentioned above and described below. k: This parameter is the scale argument.Return value: This function returns the tr
2 min read
Node Jimp | scale
The scale() function is an inbuilt function in Nodejs | Jimp that uniformly scales the image by a factor. Syntax: scale(scale, mode, cb) Parameter: scale: This parameter stores the scaling factor of the image.mode: This is an optional parameter that stores the scaling method.cb: This is an optional parameter that is invoked when compilation is comp
2 min read
HTML canvas scale() Method
The HTML canvas scale() Method is used to scale the current drawing into smaller or larger size. After scaling the drawing, all the feature of drawing scaled. It will have to define before the canvas. Syntax: context.scale( scalewidth, scaleheight ) Parameter Values: scalewidth: It scale the width of current drawing, (1=100%, 0.5=50%, 2=200%, and s
2 min read
The Scale Cube
In general, applications are built monolithic in the beginning. Monolithic applications are well and good when there are a smaller number of users and the traffic is very low. But, when the traffic increases, the system gets overloaded and slows down which results in poor performance, latency and system crashes also. According to the AKF Scale cube
3 min read
How to zoom in on a point using scale and translate ?
You are given a zoom in to particular image by using scale and translate method. In this zooming process, an image should be zoom in from the center of the image. That image has some width and height in case of rectangular shape and has proper dimensions according to the shape of the image. In zoom in process an image get bigger in size as per requ
3 min read
How to scale controlling border of a canvas circle using Fabric.js ?
In this article, we are going to see how to scale controlling border of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width or radius. Approach: To make it possible we are going to u
2 min read
How to make an svg scale with its parent container ?
SVG is the abbreviation for Scalable Vector Graphics. It is an Extensible Markup Language (XML) based vector image format for two-dimensional graphics. It supports interactivity and animation. This means that every attribute and every element present in the SVG file can be animated. SVG image behaviors are defined in XML text files. They can be sea
3 min read
script.aculo.us Scale Effect
This effect is used for gradually scaling an element up or down, either vertically or horizontally. It changes an element width and height dimensions and the base for em units. Syntax: new Effect.Scale('element_id', percent, [options]); or new Effect.Scale(element, percent, [options]); Effect OptionsOptionDescriptionscaleXSets whether the element s
1 min read
SVG scale Attribute
The scale attribute decides the displacement scale factor that must be used on a <feDisplacementMap> filter primitive. Only <feDisplacementMap> element is using this attribute. Syntax: scale = "number" Attribute Values: The scale attribute accepts the values mentioned above and described below number: It is either an integer or a number
2 min read
SVG FEDisplacementMap.scale Property
The SVG FEDisplacementMap.scale property returns the SVGAnimatedNumber object corresponding to the scale component of the FEDisplacementMap.scale element. Syntax: var a = FEDisplacementMap.scale Return value: This property returns the SVGAnimatedNumber object corresponding to the scale component of the FEDisplacementMap.scale element. Example 1: C/
1 min read
jQuery UI Scale Effect
In this article, we are going to show the effect of scale using jQuery UI, all the content will be resized when the action button is clicked which actually triggers the scale effect script. Syntax : $( ".selector" ).effect( selectedEffect, options, time(in ms), callback ); Parameter: selectedEffect: Effect selected in jQuery UI.options: Added for c
2 min read
Semantic-UI Scale Transition
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about scale transition. It is equipped with pre-built semantic components that help create respo
2 min read
Tachyons Typography type-scale
Tachyons type-scale is used to specify the format of the text. For example title of an article is always bold and bigger than the rest of the content in the article. Syntax: <element_name class="class_name">...</element_name> Tachyons Typography type-scale Classes: f-headline: This class is used to define the headline of the page.f-subh
2 min read
React.js Blueprint Colors Gray scale
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Colors are important for styling the web page. Grayscale colors are different shades of gray color available to design web pages. Gray scale colors: Light-Gray: These are avail
3 min read
How to Format X Axis Time Scale Values in ChartJS ?
In Chart.js, formatting the x-axis time values involves searching for ways to present temporal data effectively. By default, Chart.js supports time series data and provides powerful options to customize the appearance of time labels on the x-axis. There are several approaches to format x-axis time scale values in Chart.js which are as follows: Tabl
4 min read
How to Fix Error: "category" Is Not A Registered Scale In Chart.js?
The error message "category" is not a registered scale in Chart.js typically occurs when you try to create a chart without properly registering the necessary components or when the configuration for the chart is incorrect. In this article, we will guide you through the steps to resolve this error by ensuring that the "category" scale is registered
3 min read
three90RightbarBannerImg