CSS scale() Function

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>w3wiki</h1> 
    <h2>CSS scale() function</h2> 
    <br><br> 
    <img class="scale_image" src=  
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="w3wiki 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>w3wiki</h1> 
    <h2>CSS scale() function</h2> 
  
    <div class="GFG">Welcome to w3wiki</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

html

html

Contact Us