Дополнительный курс

Рекомендуемый курс:

Функция 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

منابع:ویژگی scale CSS

منابع:توابع scale() CSS

منابع:توابع scaleX() CSS

منابع:توابع scaleY() CSS