Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

Синтаксис

scale3d(sx, sy, sz)

Значения

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

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

Метки документа и участники

 Внесли вклад в эту страницу: bad4iz
 Обновлялась последний раз: bad4iz,