CSS scale3d() Function

The scale3d() function is an inbuilt function which is used to resize the element in a 3D space. It scales the elements in the x, y, and z planes. Syntax:

scale3d( sx, sy, sz )

Parameters: This function accepts three parameters as mentioned above and described below:

sx: It resizes the elements in the horizontal plane.
sy: It resizes the elements in the vertical plane.
sz: It resizes the elements in the z-component of the scaling vector.

Below examples illustrate the scale3d() function in CSS:

Example 1:

html

 
<!DOCTYPE html>
<html>

<head>
    <title>CSS scale3d() function</title>

    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
        
        .scale3d_image {
            transform: scale3d(2, 1, 1);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS scale3d() function</h2>

    <br><br>

    <img class="scale3d_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 scale3d() function</title>

    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
        
        .GFG {
            font-size: 35px;
            font-weight: bold;
            color: green;
            transform: scale3d(1, 2, 1);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS scale3d() function</h2>

    <div class="GFG">Welcome to GeeksforGeeks</div>
</body>

</html>

Output:

Supported Browsers: The browsers supported by scale3d() function are listed below:

Google Chrome 12
Edge 12
Internet Explorer 10
Firefox 10
Opera 15
Safari 4

Explore