scale3d() CSS Function

Description

The CSS scale3d() function is used to scale elements in a three-dimensional space. It takes three parameters, which represent the amount of scaling to be applied in each direction:

• sx: The amount to scale the element on the x-axis.
• sy: The amount to scale the element on the y-axis.
• sz: The amount to scale the element on the z-axis.

Each parameter can be a positive or negative number. Positive numbers scale the element up, while negative numbers scale the element down. A value of 1 has no effect.

For example, the following CSS code will scale an element to twice its original size in all three dimensions:

.element {
  transform: scale3d(2, 2, 2);
}

You can also use the scale3d() function to scale an element differently in each dimension. For example, the following CSS code will scale an element to twice its original size in the x- and y-axes, but only half its original size in the z-axis:

.element {
  transform: scale3d(2, 2, 0.5);
}

The scale3d() function can be used to create a variety of 3D effects, such as rotating and translating elements. It can also be used to create animations, such as making elements appear to grow or shrink.

Here is an example of how to use the scale3d() function to create a simple animation:

<div class="element"></div>

.element {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s;
}

.element:hover {
  transform: scale3d(1.5, 1.5, 1);
}

This code will create a red box that is 100px wide and 100px high. When the user hovers over the box, it will grow to 1.5 times its original size in all three dimensions. This will create a simple animation effect.

The scale3d() function is a powerful tool for creating 3D effects and animations with CSS. It is relatively easy to use, and it can be used to create a variety of different effects.

Syntax

transform: scale3d(<numberX>, <numberY>, <numberZ>);

Values

• <numberX>The scale of the element horizontally.
• <numberY>The scale of the item vertically.
• <numberZ>The scale of the item representing the z-component.

Example

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

.scale {

    transform-origin: top left;

    transform: scale3d(2, 2, 1);

}

Browser Support

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

Desktop
12	12	10	15	4

Tablets / Mobile
18	10	14	3.2	1	3

Last updated by CSSPortal on: 7th October 2023