Двумерные трансформации / Увеличение, уменьшение [4/32]
×

Увеличение, уменьшение [4/32]

Ещё одной возможностью CSS-трансформаций является масштабирование блоков. С помощью функции scale можно увеличивать или уменьшать элементы.

Значением этой функции может быть любое число. При этом значение 1 считается точкой отсчёта, когда блок имеет оригинальные размеры. Рассмотрим примеры:

  • scale(0.5) уменьшит объект в 2 раза;
  • scale(2) увеличит объект в 2 раза;
  • scale(0) полностью «схлопнет» объект, и его не будет видно;
  • scale(1) оставит объект без изменений.

Вообще функция scale как и translate принимает 2 аргумента:

scale(масштаб-по-X [, масштаб-по-Y])

Если масштаб-по-Y не задан, то считается, что он такой же, как масштаб-по-X:

transform: scale(2) то же самое, что transform: scale(2, 2)

Также в случае, когда необходимо масштабировать объект только по одной оси независимо от другой, существуют функции scaleX(масштаб-по-Х) и scaleY(масштаб-по-Y).

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Увеличение, уменьшение</title> <meta charset="utf-8"> <base href="/assets/course71/"> <link rel="stylesheet" href="world.css"> </head> <body> <div class="world"> <div class="wizard"> </div> <div class="hippo"> </div> <div class="mouse"> </div> </div> </body> </html>
CSS
.hippo { } .mouse { } .wizard { top: 244px; left: 10px; }
HTML Academy
  1. Уменьшите размеры фигурки бегемота .hippo, добавив ему трансформацию transform: scale(0.25).
  2. Увеличьте мышь .mouse в 3 раза: transform: scale(3).
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.