--- title: scale3d() slug: Web/CSS/transform-function/scale3d() translation_of: Web/CSS/transform-function/scale3d() ---

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

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

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

Синтаксис

scale3d(sx, sy, sz)

Значения

sx: Является {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
sy: Является {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
sz: Является {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
Это преобразование применяется к пространству 3D и не может быть представлено на плоскости.		$(\begin{matrix} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{matrix})$	$(\begin{matrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

Примеры

Without changing the origin

HTML

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

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

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

CSS

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

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

Result

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}