scale3d()

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с марта 2022 года.

Функция CSS function определяет преобразование, которое изменяет размер элемента в трёхмерном пространстве. Так как величина масштабирования определяется вектором [sx, sy, sz], можно изменять размер различных измерений с различным масштабом. Результатом является тип данных <transform-function>.

Попробуйте

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

Если значение координаты находится вне диапазона [-1, 1], элемент увеличивается вдоль этого измерения; если внутри, он уменьшается. Если оно отрицательно, результат — отражение точки по этому измерению. Значение 1 не оказывает никакого влияния.

Синтаксис

Функция scale3d() задается тремя значениями, которые представляют величину масштабирования, применяемого по каждому направлению.

scale3d(sx, sy, sz)

Значения

sx: Представляет собой <number>, представляющее абсциссу (горизонтальную, x-компоненту) вектора масштабирования.
sy: Представляет собой <number>, представляющее ординату (вертикальную, y-компоненту) вектора масштабирования.
sz: Представляет собой <number>, представляющее z-компоненту вектора масштабирования.

Декартовы координаты на ℝ^2	Однородные координаты на ℝℙ^2	Декартовы координаты на ℝ^3	Однородные координаты на ℝℙ^3
Это преобразование применяется к трёхмерному пространству и не может быть представлено на плоскости.		$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{array} \right)$	$\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$

Примеры

Без изменения начала координат

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}

Результат

Перевод начала координат преобразования

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}

Результат

Спецификации

Спецификация
CSS Transforms Module Level 2 # funcdef-scale3d

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`scale3d`	12	12	10	15	4	18	10	14	3.2	1.0	3

См. также

transform
<transform-function>
scaleZ()
translate3d()
rotate3d()
Отдельные свойства преобразования:

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d