scaleZ() CSS Function

Description

The CSS scaleZ() function is used to scale an element along the z-axis. This means that it will make the element appear closer to or further away from the viewer. The z-axis is the perpendicular axis to the screen, so scaling along the z-axis will not change the width or height of the element, but it will change its perceived depth.

The scaleZ() function takes a single parameter, which is the scaling factor. This can be any positive or negative number. A scaling factor of 1 will not scale the element at all, while a scaling factor of 2 will double the size of the element along the z-axis, and a scaling factor of 0.5 will halve the size of the element along the z-axis.

Here is an example of how to use the scaleZ() function:

.element {
  transform: scaleZ(2);
}

This will make the element appear twice as close to the viewer.

The scaleZ() function can be used to create a variety of effects, such as making elements appear to pop off the screen, or making them appear to recede into the background. It can also be used to create 3D effects, such as making elements appear to rotate or flip.

Here are some examples of how to use the scaleZ() function to create different effects:

Make an element appear closer to the viewer:

.element {
  transform: scaleZ(2);
}

Make an element appear further away from the viewer:

.element {
  transform: scaleZ(0.5);
}

Make an element appear to pop off the screen:

.element {
  transform: scaleZ(1.5);
}

Make an element appear to recede into the background:

.element {
  transform: scaleZ(0.75);
}

Make an element appear to rotate:

.element {
  transform: rotate(45deg) scaleZ(1.5);
}

Make an element appear to flip:

.element {
  transform: scaleX(-1) scaleZ(1.5);
}

The scaleZ() function is a great tool that can be used to create a variety of effects. By experimenting with different scaling factors and combining the scaleZ() function with other transform functions, you can create truly unique and visually appealing designs.

Syntax

scaleZ() = transform: scaleZ(<number>);

Values

<number>The value is a positive or negative number.
- a value greater than 1 (for example: 1.5) increases the scale;
- a value less than 1 (for example: 0.8) reduces the scale;
- a value of 1 leaves the element size unchanged and does not give a visible effect.

Example

HTML

<img class="scaleZ" src="images/nature.jpg" alt="Nature Image">

CSS

.scaleZ {

    transform-origin: top;

    transform: perspective(400px) scaleZ(1.5) rotateX(45deg);

    margin-left: 60px;

}

Result

Browser Support

The following table will show you the current browser support for the CSS scaleZ() function.

Desktop

12	12	10	15	4

Tablets / Mobile

18	10	14	3.2	1	3

Last updated by CSSPortal on: 7th October 2023

Support Us