Трансформации: scale: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Базовое масштабирование

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

CSS

.box {
  width: 80px;
  height: 80px;
  background-color: dodgerblue;
  margin: 50px;
  /* Примените трансформацию здесь */
  input1: input2(1.5);
}

                     .box {
  width: 80px;
  height: 80px;
  background-color: dodgerblue;
  margin: 50px;
  /* Примените трансформацию здесь */
  input1: input2(1.5);
}

HTML

<div class="box"></div>

Используйте свойство `transform` и функцию `scale()`. Внутрь функции `scale()` передайте одно числовое значение, которое будет коэффициентом масштабирования для обеих осей (X и Y). Значение больше 1 увеличивает элемент, меньше 1 - уменьшает.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Масштабирование по оси X

Задача: Растянуть зеленый прямоугольник в два раза по горизонтали (оси X), не изменяя его высоту. Используйте соответствующую функцию масштабирования.

CSS

.rectangle {
  width: 60px;
  height: 100px;
  background-color: mediumseagreen;
  margin: 50px;
  /* Примените трансформацию здесь */
  transform: input1(input2);
}

                     .rectangle {
  width: 60px;
  height: 100px;
  background-color: mediumseagreen;
  margin: 50px;
  /* Примените трансформацию здесь */
  transform: input1(input2);
}

HTML

<div class="rectangle"></div>

Для масштабирования только по горизонтали используйте функцию `scaleX()`. Передайте ей числовое значение - коэффициент масштабирования по оси X.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Масштабирование по оси Y

Задача: Уменьшить высоту оранжевого прямоугольника в два раза (масштабировать по оси Y), не изменяя его ширину. Используйте соответствующую функцию масштабирования.

CSS

.rectangle {
  width: 100px;
  height: 100px;
  background-color: darkorange;
  margin: 50px;
  /* Примените трансформацию здесь */
  transform: input1(0.5);
}

                     .rectangle {
  width: 100px;
  height: 100px;
  background-color: darkorange;
  margin: 50px;
  /* Примените трансформацию здесь */
  transform: input1(0.5);
}

HTML

<div class="rectangle"></div>

Для масштабирования только по вертикали используйте функцию `scaleY()`. Передайте ей числовое значение - коэффициент масштабирования по оси Y. Значение 0.5 уменьшит элемент вдвое.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Неравномерное масштабирование

Задача: Масштабировать фиолетовый квадрат так, чтобы он стал в 1.2 раза шире и в 0.8 раза ниже своего исходного размера. Используйте одну функцию `scale()`.

CSS

.box {
  width: 90px;
  height: 90px;
  background-color: darkviolet;
  margin: 50px;
  /* Примените трансформацию здесь */
  transform: scale(input1, input2);
}

                     .box {
  width: 90px;
  height: 90px;
  background-color: darkviolet;
  margin: 50px;
  /* Примените трансформацию здесь */
  transform: scale(input1, input2);
}

HTML

<div class="box"></div>

Функция `scale()` может принимать два значения через запятую: `scale(масштаб_X, масштаб_Y)`. Первое значение задает масштабирование по горизонтали, второе - по вертикали.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Задача: Сделать так, чтобы красный круг плавно увеличивался до 1.3 раза при наведении на него курсора мыши. Добавьте плавный переход для анимации.

CSS

.circle {
  width: 100px;
  height: 100px;
  background-color: crimson;
  border-radius: 50%;
  margin: 50px;
  /* Добавьте плавный переход */
  input1: transform 0.3s ease;
}

.circleinput2 {
  /* Примените масштабирование при наведении */
  input3: scale(1.3);
}

                     .circle {
  width: 100px;
  height: 100px;
  background-color: crimson;
  border-radius: 50%;
  margin: 50px;
  /* Добавьте плавный переход */
  input1: transform 0.3s ease;
}

.circleinput2 {
  /* Примените масштабирование при наведении */
  input3: scale(1.3);
}

HTML

<div class="circle"></div>

Используйте псевдокласс `:hover` для применения стилей при наведении. Внутри `:hover` задайте `transform: scale(значение)`. Чтобы анимация была плавной, добавьте свойство `transition` к основному селектору элемента (не в `:hover`), указав анимируемое свойство (`transform`) и длительность перехода (например, `0.3s`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение точки трансформации (Top Left)

Задача: Увеличить бирюзовый квадрат в 1.5 раза. Масштабирование должно происходить относительно его верхнего левого угла, а не центра (который используется по умолчанию).

CSS

.box {
  width: 80px;
  height: 80px;
  background-color: turquoise;
  margin: 50px;
  /* Установите точку трансформации */
  input1: input2;
  /* Примените масштабирование */
  transform: scale(1.5);
}

                     .box {
  width: 80px;
  height: 80px;
  background-color: turquoise;
  margin: 50px;
  /* Установите точку трансформации */
  input1: input2;
  /* Примените масштабирование */
  transform: scale(1.5);
}

HTML

<div class="box"></div>

Используйте свойство `transform-origin`, чтобы изменить точку, относительно которой происходит трансформация. Значение `top left` (или `0 0`, или `0% 0%`) установит точку трансформации в верхний левый угол.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение точки трансформации (Bottom Right)

Задача: Уменьшить изображение в два раза (до 0.5). Масштабирование должно происходить относительно его правого нижнего угла.

CSS

.image-container {
  width: 150px;
  height: 150px;
  margin: 50px;
  border: 1px solid #ccc;
  overflow: hidden; /* Чтобы видеть границы контейнера */
}

.image-container img {
  display: block;
  width: 100%;
  height: 100%;
  /* Установите точку трансформации */
  transform-origin: input1;
  /* Примените масштабирование */
  transform: input2(0.5);
  transition: transform 0.3s ease;
}

/* Можно добавить :hover для наглядности, но не обязательно для задания */
/* .image-container:hover img {
  transform: scale(1);
} */

                     .image-container {
  width: 150px;
  height: 150px;
  margin: 50px;
  border: 1px solid #ccc;
  overflow: hidden; /* Чтобы видеть границы контейнера */
}

.image-container img {
  display: block;
  width: 100%;
  height: 100%;
  /* Установите точку трансформации */
  transform-origin: input1;
  /* Примените масштабирование */
  transform: input2(0.5);
  transition: transform 0.3s ease;
}

/* Можно добавить :hover для наглядности, но не обязательно для задания */
/* .image-container:hover img {
  transform: scale(1);
} */

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Example Image">
</div>

Используйте свойство `transform-origin`. Значение `bottom right` (или `100% 100%`) установит точку трансформации в правый нижний угол.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация: Масштабирование и Поворот

Задача: Увеличить элемент в 1.2 раза и одновременно повернуть его на 45 градусов. Примените обе трансформации к элементу.

CSS

.shape {
  width: 80px;
  height: 80px;
  background-color: gold;
  margin: 80px;
  /* Примените масштабирование и поворот */
  transform: input1(1.2) input2(45deg);
}

                     .shape {
  width: 80px;
  height: 80px;
  background-color: gold;
  margin: 80px;
  /* Примените масштабирование и поворот */
  transform: input1(1.2) input2(45deg);
}

HTML

<div class="shape"></div>

В свойстве `transform` можно перечислять несколько функций трансформации через пробел. Например: `transform: scale(значение) rotate(значение)`. Порядок функций может влиять на конечный результат, но для `scale` и `rotate` из центра он обычно одинаков.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку