Комбинирование трансформаций: Тренажер CSS

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

В этой серии упражнений вы попрактикуетесь в применении нескольких CSS трансформаций к одному элементу одновременно. Комбинирование таких функций, как `translate()`, `rotate()`, `scale()` и `skew()` в одном свойстве `transform`, позволяет создавать сложные и интересные визуальные эффекты. Задания построены от простого к сложному: начиная с комбинации двух трансформаций и заканчивая более сложными сценариями с изменением точки трансформации (`transform-origin`) и применением эффектов при наведении.

Список тем

Смещение и поворот

Ваша задача - сместить квадрат вниз на 50 пикселей и одновременно повернуть его на 45 градусов по часовой стрелке. Допишите необходимые функции трансформации в свойство `transform`.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  margin: 50px auto;
  /* Примените смещение и поворот здесь */
  transform: input1 input2;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  margin: 50px auto;
  /* Примените смещение и поворот здесь */
  transform: input1 input2;
}

HTML

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

Используйте свойство `transform`. Чтобы применить несколько трансформаций, перечислите нужные функции через пробел в значении этого свойства. Для смещения используйте `translateY()`, а для поворота - `rotate()`. Порядок функций важен!

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

Результат

Сообщения

Выполнить

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

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

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

Необходимо уменьшить размер элемента в два раза по обеим осям и одновременно сместить его вправо на 100 пикселей. Заполните пропуски в свойстве `transform`, чтобы добиться нужного эффекта.

CSS

.box {
  width: 150px;
  height: 150px;
  background-color: tomato;
  margin: 50px;
  /* Примените масштабирование и смещение */
  transform: input1 input2;
}

                     .box {
  width: 150px;
  height: 150px;
  background-color: tomato;
  margin: 50px;
  /* Примените масштабирование и смещение */
  transform: input1 input2;
}

HTML

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

Используйте свойство `transform`. Для масштабирования примените функцию `scale()`, указав коэффициент масштабирования (меньше 1 для уменьшения). Для смещения вправо используйте `translateX()`. Перечислите обе функции через пробел.

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

Результат

Сообщения

Выполнить

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

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

Поворот и наклон при наведении

Сделайте так, чтобы при наведении курсора на элемент он поворачивался на -15 градусов (против часовой стрелки) и одновременно наклонялся на 20 градусов по оси X. Допишите нужные трансформации в псевдокласс `:hover`.

CSS

.box {
  width: 120px;
  height: 120px;
  background-color: gold;
  margin: 80px auto;
  transition: transform 0.4s ease;
}

.box:hover {
  /* Примените поворот и наклон здесь */
  transform: input1 input2;
}

                     .box {
  width: 120px;
  height: 120px;
  background-color: gold;
  margin: 80px auto;
  transition: transform 0.4s ease;
}

.box:hover {
  /* Примените поворот и наклон здесь */
  transform: input1 input2;
}

HTML

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

Вам нужно добавить правило для селектора `.box:hover`. Внутри этого правила используйте свойство `transform`. Примените функции `rotate()` для поворота (с отрицательным значением для движения против часовой стрелки) и `skewX()` или `skew()` для наклона по оси X. Не забудьте добавить `transition` для плавности.

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

Результат

Сообщения

Выполнить

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

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

Тройная трансформация

Примените к элементу сразу три трансформации: сместите его на 50 пикселей по оси X и на 30 пикселей по оси Y, поверните на 10 градусов и увеличьте в 1.2 раза. Заполните пропуск в свойстве `transform`.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin: 60px;
  /* Примените смещение, поворот и масштабирование */
  transform: input1;
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin: 60px;
  /* Примените смещение, поворот и масштабирование */
  transform: input1;
}

HTML

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

Используйте свойство `transform`. Последовательно перечислите функции `translate()` (с двумя значениями для X и Y), `rotate()` и `scale()` с соответствующими значениями. Порядок функций может влиять на конечный результат, но для данного задания подойдет указанный порядок.

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

Результат

Сообщения

Выполнить

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

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

Комбинация с transform-origin

Измените точку трансформации элемента на его нижний левый угол. Затем примените трансформацию: поверните элемент на 90 градусов и масштабируйте его до 1.5 раз от исходного размера. Заполните пропуски для `transform-origin` и `transform`.

CSS

.box {
  width: 80px;
  height: 80px;
  background-color: mediumpurple;
  margin: 100px;
  /* Установите точку трансформации */
  transform-origin: input1;
  /* Примените поворот и масштабирование */
  transform: input2 input3;
}

                     .box {
  width: 80px;
  height: 80px;
  background-color: mediumpurple;
  margin: 100px;
  /* Установите точку трансформации */
  transform-origin: input1;
  /* Примените поворот и масштабирование */
  transform: input2 input3;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Трансформация изображения при наведении

Сделайте так, чтобы при наведении на изображение оно плавно увеличивалось в 1.1 раза и одновременно немного поворачивалось на 5 градусов. Заполните пропуск в свойстве `transform` для состояния `:hover`.

CSS

img {
  display: block;
  width: 150px;
  height: auto;
  margin: 50px auto;
  border: 3px solid #eee;
  /* Добавьте плавный переход */
  transition: input1 0.3s ease;
}

img:hover {
  /* Примените масштабирование и поворот */
  transform: input2 input3;
}

                     img {
  display: block;
  width: 150px;
  height: auto;
  margin: 50px auto;
  border: 3px solid #eee;
  /* Добавьте плавный переход */
  transition: input1 0.3s ease;
}

img:hover {
  /* Примените масштабирование и поворот */
  transform: input2 input3;
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Example Image">

Используйте селектор `:hover` для элемента `img`. Внутри этого правила примените свойство `transform` с функциями `scale()` для увеличения и `rotate()` для поворота. Добавьте свойство `transition` к основному селектору `img` для плавной анимации.

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

Результат

Сообщения

Выполнить

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

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