scale3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

Синтаксис

scale3d(sx, sy, sz)

Значения

Является <number> , представляющим абсцисс вектора масштабирования.

Является <number> , представляющим ординату вектора масштабирования.

Является <number>, представляющим z-компонент масштабирующего вектора.

Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

Это преобразование применяется к пространству 3D и не может быть представлено на плоскости.

sx000sy000sz

sx0000sy0000sz00001

Примеры

Without changing the origin

HTML

html
<p>foo</p>
<p class="transformed">bar</p>

CSS

css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
  background-color: blue;
}

Result

Translating the origin of the transformation

HTML

html
<p>foo</p>
<p class="transformed">bar</p>

CSS

css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scale3d(2, 3, 0);
  transform-origin: center;
  background-color: blue;
}

Result

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 7 нояб. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

scale3d()

In this article

Синтаксис

Значения

Примеры

Without changing the origin

HTML

CSS

Result

Translating the origin of the transformation

HTML

CSS

Result

Help improve MDN