Рекомендации по курсу:

Функция scale3d() в CSS

Определение и использование scale3d() Функция масштабирования CSS

scale3d() Функция определяет 3D масштабирование элемента.

scale3d() Функция определяет значения масштабирования элемента в направлениях x, y и z. transform Используется в свойстве.

Пример

Пример 1

Использование scale3d() Масштабирование нескольких элементов <div>:

#myDiv1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
  transform: scale3d(1.1, 1.2, 1);
}

Попробуйте сами

Пример 2

Использование scale3d() Масштаб изображения:

#img1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
  transform: scale3d(1.1, 1.1, 1);
}

Попробуйте сами

Грамматика CSS

scale3d(sx, sy, sz)
Значение Описание
sx Число, положительное или отрицательное, определяет вектор масштабирования ширины.
sy Число, положительное или отрицательное, определяет вектор масштабирования высоты.
sz Число, положительное или отрицательное, определяет вектор масштабирования в направлении z.

Технические детали

Версия: Модуль преобразований CSS уровня 2

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Кроме Эдж Фаерфокс Сафари Опера
12 12 10 4 15

См. также:

Урок:3D-трансформации в CSS

См. также:Свойство transform в CSS

См. также:Свойство CSS scale

См. также:Функция scale() в CSS

См. также:Функция scaleX() в CSS

См. также:Функция scaleY() в CSS