CSS properties - scale

revision:

scale property

- allows you to change the size of elements. The scale property defines values for how much an element is scaled in x- and y-directions. You can also define how much an element is scaled in z-direction.

Scale values can be given as one value, two values, or three values.

If one value is given, the element is scaled the same amount in both x- and y-direction.
If two values are given, the element is scaled in x- and y-direction individually.
If three values are given, the element is scaled in x-, y- and z-direction individually.

An alternative technique to scale an element is to use CSS transform property with CSS scale() function. The CSS scale property is arguably a simpler and more direct way to scale an element.

CSS syntax : scale: x-axis y-axis z-axis | initial | inherit;

Property values:

x-axis : defines scale factor at the x-axis. Possible values: number, %

y-axis : defines scale factor at the y-axis. Possible values: number, %

z-axis : defines scale factor at the z-axis. Possible values: number, %

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.scale="2 0.7"

example: scale property


Scales div element to twice its original size.

Try to change scale value to 0.5 and see what happens.

code: 
                    <div>
                        <div id="child"></div>
                        <br>
                        <p>Scales div element to twice its original size.</p>
                        <p>Try to change scale value to 0.5 and see what happens.</p>
                    </div>
                    <style>
                        div#child {margin: 2vw; height: 5vw; width: 5vw; background-color: red; scale: 2;}
                    </style>

example: scale property

Changes the size of the red box. Scales red box so that it becomes double in size (factor 2) on x-axis and half the size (50%) on y-axis.

DIV1
DIV2
DIV2
code: 
                    <div>
                        <p>Changes the size of the red box. Scales red box so that it becomes double 
                        in size (factor 2) on x-axis and half the size (50%) on y-axis.</p>
                        <div id="DIV1">DIV1
                        <div id="DIV2original">DIV2</div>
                        <div id="DIV2">DIV2</div>
                        </div>
                    </div>
                    <style>
                        #DIV1 {width: 20vw; height: 20vw; padding: 1vw; margin: auto; border: 0.1vw solid black;}
                        #DIV2 {height: 10vw; width: 10vw; border: 0.1vw solid black; background-color: red; scale: 2 50%;}
                        #DIV2original {position: absolute; width: 10vw; height: 10vw; border: 0.1vw dashed grey;
                            background-color: lightgrey;   opacity: 0.5;}
                    </style>