CSS scale(), scaleX() & scaleY() functions of the transform property

The CSS scale() function of the transform property is used to scale 2D elements. We can scale the elements with one or two values. It can be in either negative or positive values.

The scale value 1 is the normal size of an element. If you want to scale down the size of an element, just decrease here the value below 1. To scale up the size of an element, just increase the value above 1.

The single value can scale the element uniformly in all its directions. If there are two scale values, the first value scales the elements horizontally and the second value scales the elements vertically.

We can also use here transform: scaleX(); or transform: scaleY(); The scaleX() scales the element horizontally and the scaleY() scales the element vertically.

<!DOCTYPE html>
<html>
 <head>
    <style>
    html {
        height: 100%;
        display: grid;
        justify-content: center;
        align-items: center;
    }
    p {
        border: 5px outset #f2f;
        width: 250px;
        margin: 300px;
        font-size: 3em;
        text-align: center;
        transform: scale(5.5, 10);/* scale(3), scaleX(5.5), scaleY(5) */
}
     </style>
</head>
<body>
    <p>Scale CSS</p>
</body>
</html>