2D трансформации. Масштабирование | CSS: Transform (трансформация объектов)

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Масштабирование — возможность увеличивать или уменьшать элемент на определённый коэффициент. Это полезный трюк, который очень часто используется в анимациях. Например, вы могли его встречать при наведении курсора на какой-либо элемент. В таком случае масштабирование используется во время события hover. Попробуйте навести курсор мыши на квадрат в следующем примере:

Для масштабирования квадрата использовалась функция scale() свойства transform. В качестве значения может быть указано одно или два числа. На самом деле таких чисел может быть и три, но подробнее об этом мы поговорим в уроке, посвящённом масштабированию в 3D.

  • Одно значение: масштабирование происходит на одинаковый коэффициент и по оси x и по оси y. Именно одно значение было использовано в примере выше.
  • Два значения: в качестве первого значения передаётся масштабирование по оси
    x    , а в качестве второго аргумента масштабирование по оси y.

Но что именно масштабируется? Если вы попробовали навести курсор в прошлом примере, то заметили, что масштабировался не только сам квадрат, но и текст внутри него. Именно так и будет происходить: функция scale() влияет на всё, что расположено внутри блока и на него самого.

Стандартным значением функции scale() является единица. Вы можете думать о значениях, как об процентах, где единица равна 100%. Так достаточно просто определить диапазон возможных значений: 0 <= x < ∞. Или, другими словами, функция scale()

принимает значение от нуля до бесконечности. Если элемент получит масштабирование со значением ноль, то он просто скроется. Мы можем увеличивать объект до абсолютно любого размера. Но так обычно не делают 🙂

Любое значение меньше единицы уменьшает элемент, а больше единицы увеличивает его. Обратите внимание, что число не обязательно должно быть целым. В качестве значения могут выступать и такие: scale(1.2), scale(0.3), scale(2.1) и так далее. Главное — использовать разделитель в виде точки, иначе вы случайно укажете два разных значения: для оси x и для оси y.

Пример выше хоть и выглядит достаточно простым, но кроет в себе несколько важных моментов, о которых стоит помнить:

  1. Функция scale() не влияет на HTML элементы, расположенные рядом. Попробуйте убрать свойство transform у блока с классом square blue. Вы увидите, что он окажется под зелёным блоком, ровно в том месте, где и был бы без использования свойства transform. То есть элемент ведёт себя так, как будто у него установлено относительное позиционирование.
  2. По умолчанию, зелёный элемент оказался выше красного. Здесь происходит контекст наложения элементов друг на друга и он такой же, как и при использовании абсолютного позиционирования: блоки, расположенные ниже в HTML, по умолчанию, будут располагаться выше в контексте наложения, если не указать иного с помощью свойства
    z-index    .

На самом деле, вы можете указать отрицательное значение для любого направления при использовании функции scale. Но что это даст? Представьте, что происходит с элементом, когда его масштабирование по оси x стремится к нулю. Элемент всё больше начинается сплющиваться до тех пор, пока значение не станет нулём. Элемент визуально исчезнет, хотя, на самом деле он продолжит своё существование. Если дать теперь отрицательное значение, то элементу нужно расти, но куда? Правильно — в противоположную сторону. Таким образом мы увидим элемент как если бы находились позади него, или, по-простому, мы отзеркалим элемент по оси

x.

При использовании scale вы также можете установить произвольную точку трансформации с помощью transform-origin.

Зачастую в этом нет особого смысла, кроме как в использовании одного из четырёх стандартных значений:

  • top
  • right
  • bottom
  • left

Что же произойдёт при использовании этих значений? На самом деле всё будет работать так, как и надо — мы просто сменим точку трансформации.

Но в случае с масштабированием не очень понятно, о чём пойдёт речь, поэтому свойство часто используют для контроля за месторасположением элемента после трансформации.

Вернёмся к первому примеру урока:

После применения scale(1.5) к центральному блоку он немного сменил своё расположение, так как трансформировался от центральной точки элемента. Именно от неё произошло увеличение. Но что делать, если мы хотим увеличить элемент, но оставить верхнюю левую точку там, где она была бы до применения трансформации? Это может быть очень полезно при создании анимации, так как мы уверены в том, где элемент будет находиться.

Именно здесь пригодится свойство transform-origin. Как было сказано в прошлых уроках, оно может принимать одно или несколько значений:

  • Одно значение — установка точки трансформации по оси x.
  • Два значения — установка точки трансформации по осям x и y.

Воспользуемся этими значениями и укажем, что центральный блок должен иметь точку трансформации в следующем виде:

  • По оси x точка трансформации должна находиться слева
  • По оси y точка трансформации должна находиться сверху

Таким образом точкой трансформации станет верхний левый угол, а значит масштабирование будет происходит именно от этой точки, что не даст ей переместиться:

Именно использование свойства transform-origin позволяет добиться эффекта появления элемента слева направо, как часто бывает при наведении на элемент. Попробуйте в следующем примере навести курсор мыши на иконку подписки.

раздельные функции CSS-трансформации — CSS-LIVE

Перевод статьи  A Trick: Individual CSS Transform Functions с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона.

Одно лишь свойство transform в CSS дает нам массу возможностей — можно вращать, сдвигать, масштабировать и не только, и всё это сразу. Но в том, что эти разные функции трансформации входят в одно свойство, таится ловушка.

Часто бывает нужно применять разные трансформации для разных состояний элемента. Скажем, у нас есть кнопка, которая всегда будет смещена по вертикали на -150%. Когда пользователь наводит на нее мышкой, мы ее чуть уменьшим, а при нажатии (в активном состоянии) перевернем на 180 градусов. В этом примере для кнопки «My Button» приведен CSS-код, который первым приходит на ум по такому описанию, а кнопка «Expected» показывает, как добиться описанного поведения на самом деле.

See the Pen Basics with Transform Functions by Dan Wilson (@danwilson) on CodePen.

При наведении мы не просто добавляем масштаб к начальному состоянию кнопки… мы еще и переопределяем исходный сдвиг, так что она масштабируется и возвращается к translateY(0).

Почему так? Из-за линейной алгебры. То, как происходят эти трансформации, зависит от других трансформаций и их порядка (так что translate(-50%, -50%) scale(.4) rotate(50deg) — не то же самое, что rotate(50deg) translate(-50%, -50%) scale(.4)

), в сухом остатке там умножение матриц. Но обычно нам не надо знать настолько глубокие «внутренности» трансформаций. Обычно веб-разработчики просто хотят знать, как управлять этими функциями трансформации по отдельности.

See the Pen Order of Transform Functions by Dan Wilson (@danwilson) on CodePen.

Chrome начал реализовывать отдельные свойства, так что translate

, rotate, and scale стали полноправными свойствами, как видно в предыдущем примере (на момент публикации требует Chrome Canary). Но у этого есть свои ограничения:

  • Отдельные x-, y‑ и z-компоненты каждого из них по-прежнему привязаны к единому свойству.
  • Преобразуются в матрицы они всегда в одном порядке: translate scale rotate.
  • В ближайшее время — только в Chrome Canary.

Так что же делать?

Использовать CSS-переменные.

Когда я слушал доклад Дэвида Хуршида о CSS-переменых, моим глазам вдруг открылась масса возможностей для применения их в анимации. А когда я начал совать переменные куда только можно, их мощь стала еще яснее. Без дальнейших церемоний… вот трюк, который даст нам больше гибкости (все «как», «что» и «почему» — сразу после примера).

See the Pen CSS Variables + Transform = Individual Properties (with Inputs) by Dan Wilson (@danwilson) on CodePen.

Мы задаем ключевой начальный transform нашему элементу с помощью всех переменных, которые мы собираемся менять. Модифицируя значение переменной для другого состояния, мы можем получить CSS-правило, более похожее на наш первоначальный код, но с гораздо большей гибкостью при усложнении. В этом примере мы обрабатываем намного больше наших первоначальных трех состояний, подключив к делу JavaScript (но это не обязательно: вот версия нашего первого примера с кнопкой на одном CSS). Фактически, тут по-прежнему определено одно CSS-свойство, и мы меняем только одну функцию трансформации за раз (без разницы, в JS или в CSS).

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

Чем это лучше будущих отдельных свойств из Chrome Canary?

  • Можно как угодно комбинировать x, y и z, поскольку мы сами решаем, как задать transform изначально.
  • Аналогично, мы можем задавать какой нам угодно порядок функций трансформации (хотя и теряем не столь часто нужную, наверное, возможность менять этот порядок от одного состояния к другому).
  • Я проверил, что это хорошо работает в новейшем Chrome (56), Firefox (50) и Safari (только в Technical Preview — Safari 10 поддерживает переменные, но без плавных переходов). Я пока не смог проверить в Edge Insider Preview (первой версии, которая поддерживает CSS-переменные) — так что, пожалуйста, сообщите, если у вас будут новости с того фронта.

И, пожалуйста, сообщите, если у вас есть креативное применение для этого приема.

P.S. Это тоже может быть интересно:
  • CSS-переменные, CSS-трансформация
Масштаб

— CSS: каскадные таблицы стилей

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

 /* Значения ключевых слов */
шкала: нет;
/* Отдельные значения */
/* значения больше 1 или 100% увеличивают размер элемента */
шкала: 2;
/* значения меньше 1 или 100% уменьшают размер элемента */
масштаб: 50%;
/* Два значения */
шкала: 2 0,5;
/* Три значения */
шкала: 200% 50% 200%;
/* Глобальные значения */
масштаб: наследовать;
шкала: начальная;
шкала: возврат;
шкала: обратный слой;
масштаб: не установлен;

Значения

Одно значение

A <число> или <процент> , указывающее коэффициент масштабирования, чтобы затронутый элемент масштабировался с одинаковым коэффициентом по осям X и Y. Эквивалент функции scale() (2D-масштабирование) с одним указанным значением.

Два значения

Два значения <число> или <процент> , которые определяют значения масштабирования по осям X и Y (соответственно) для 2D-масштаба. Эквивалент scale() (2D-масштабирование) функция с двумя указанными значениями.

Три значения

Три <число> или <процент> значений, которые определяют значения масштабирования по осям X, Y и Z (соответственно) трехмерной шкалы. Эквивалент функции scale3d() (трехмерное масштабирование).

нет

Указывает, что масштабирование не должно применяться.

Initial value none
Applies to transformable elements
Inherited no
Computed value as specified
Animation type a transform
Создает контекст стека да
 масштаб = 
 нет | 
 [ <число> | <процент> ]{1,3}

Масштабирование элемента при наведении

В следующем примере показано, как масштабировать элемент при наведении. Показаны два поля, одно с одним значением масштаба , которое масштабирует элемент по обеим осям. Второе поле имеет два значения масштаба , которые независимо масштабируют элемент по осям X и Y.

HTML 
 
одно значение


два значения
CSS 
 .box {
  плыть налево;
  поле: 1em;
  ширина: 7em;
  высота строки: 7em;
  выравнивание текста: по центру;
  переход: 0,5 с облегчение входа-выхода;
  граница: 3 пикселя пунктирная;
}
#box1:наведите {
  масштаб: 1,25;
}
#box2:наведите {
  шкала: 1,25 0,75;
}
Результат
1137 # нагрузки BRABLES BRABLES BRABLESAL. Включите JavaScript для просмотра данных.

  • перевод
  • повернуть
  • трансформировать

Примечание: перекос не является независимым значением преобразования

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Свойство масштаба CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Изменить размер элемента:

дел. {
шкала: 2;
}

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

Определение и использование

Свойство Scale позволяет изменять размер элементов.

Свойство scale определяет значения масштабирования элемента в направлениях x и y. Вы также можете определить, насколько элемент масштабируется в направлении z.

Значения шкалы могут быть указаны как одно значение, два значения или три значения.

  • Если задано одно значение, элемент масштабируется одинаково как в направлении x, так и в направлении y.
  • Если задано два значения, элемент масштабируется по осям x и y отдельно.
  • Если задано три значения, элемент масштабируется в направлениях x, y и z отдельно.

Чтобы лучше понять свойство масштаба , просмотреть демо.

Примечание: Альтернативным способом масштабирования элемента является использование свойства CSS transform с функцией CSS scale() . Свойство CSS scale , как объясняется на этой веб-странице, возможно, является более простым и прямым способом масштабирования элемента.

Показать демо ❯

Спецификация
CSS Transforms Module Уровень 2
# Индивидуальные преобразования
Значение по умолчанию: нет
Унаследовано: нет
Анимация: да. Читать о анимированном Попробуй
Версия: CSS3
Синтаксис JavaScript: объект . style.scale=»2 0,7″ Попробуй

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

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

Собственность
шкала 104 104 72 14,1 90

Синтаксис CSS

масштаб: ось x ось y ось z |начальный|наследовать;

Значения свойств

Значение свойства Описание Демо
ось X Определяет коэффициент масштабирования по оси x. Возможные значения:
  • номер
  • %
Демонстрация ❯
ось Y Определяет коэффициент масштабирования по оси Y. Возможные значения:
  • число
  • %
Демонстрация ❯
ось Z Определяет коэффициент масштабирования по оси Z. Возможные значения:
  • номер
  • %
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
наследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Когда для свойства масштаб задано два значения, размер задается по осям x и y отдельно. Здесь размер элемента увеличивается в два раза по оси X и вполовину по оси Y:

div {
  scale: 2 50%;
}

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

Связанные страницы

Учебное пособие по CSS: CSS 2D Transforms

Учебное пособие по CSS: CSS 3D Transforms

Свойство CSS rotate: CSS свойство Rotate

CSS свойство translate: CSS Translate свойство

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top7 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.