--- title: scale3d() slug: Web/CSS/transform-function/scale3d translation_of: Web/CSS/transform-function/scale3d() original_slug: Web/CSS/transform-function/scale3d() ---
{{CSSRef}}

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

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

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

Синтаксис

scale3d(sx, sy, sz)

Значения

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

<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

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

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")}}