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

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

Эта серия упражнений предназначена для практики использования функции `rotate()` в CSS трансформациях. Вы будете работать с готовым HTML-кодом и частично написанным CSS. Ваша задача — заполнить пропущенные части CSS-кода, чтобы применить различные эффекты вращения к элементам на странице. Задания построены по принципу 'от простого к сложному', начиная с базового поворота элемента и заканчивая более специфическими случаями. Теория не предоставляется, упор сделан на практическое применение знаний.

Список тем

Базовый поворот

На странице есть синий квадрат. Ваша задача — повернуть этот квадрат на 45 градусов по часовой стрелке, используя CSS трансформации. Допишите необходимые свойство и функцию.

CSS

.square {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  margin: 50px auto;
  /* Допишите код ниже */
  input1: input2(input3);
}

                     .square {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  margin: 50px auto;
  /* Допишите код ниже */
  input1: input2(input3);
}

HTML

<div class="square"></div>

Используйте свойство `transform` и функцию `rotate()`. Внутрь функции `rotate()` передайте значение угла поворота в градусах (например, `45deg`).

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

Результат

Сообщения

Выполнить

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

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

Поворот против часовой стрелки

На странице есть зеленый прямоугольник. Поверните его на 30 градусов против часовой стрелки. Заполните пропуски в CSS коде.

CSS

.rectangle {
  width: 150px;
  height: 80px;
  background-color: mediumseagreen;
  margin: 50px auto;
  transform: input1(input2);
}

                     .rectangle {
  width: 150px;
  height: 80px;
  background-color: mediumseagreen;
  margin: 50px auto;
  transform: input1(input2);
}

HTML

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

Для поворота против часовой стрелки используйте отрицательное значение угла в функции `rotate()`. Например, `-30deg`.

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

Результат

Сообщения

Выполнить

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

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

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

Имеется красный круг. Сделайте так, чтобы при наведении курсора мыши на круг, он плавно поворачивался на 90 градусов по часовой стрелке. Добавьте недостающие CSS правила.

CSS

.circle {
  width: 100px;
  height: 100px;
  background-color: tomato;
  border-radius: 50%;
  margin: 50px auto;
  transition: input1 0.5s ease;
}

.circle:input2 {
  input3: input4(90deg);
}

                     .circle {
  width: 100px;
  height: 100px;
  background-color: tomato;
  border-radius: 50%;
  margin: 50px auto;
  transition: input1 0.5s ease;
}

.circle:input2 {
  input3: input4(90deg);
}

HTML

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

Используйте псевдокласс `:hover` для элемента. Внутри этого псевдокласса примените свойство `transform` с функцией `rotate(90deg)`. Чтобы поворот был плавным, добавьте свойство `transition` к основному селектору элемента (например, `transition: transform 0.5s;`).

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

Результат

Сообщения

Выполнить

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

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

Поворот изображения

На странице отображается изображение. Ваша задача — повернуть его на 180 градусов (вверх ногами). Заполните пропуски в CSS.

CSS

.image-rotate {
  display: block;
  width: 150px;
  height: auto;
  margin: 50px auto;
  input1: input2(input3);
}

                     .image-rotate {
  display: block;
  width: 150px;
  height: auto;
  margin: 50px auto;
  input1: input2(input3);
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Rotated Image" class="image-rotate">

Используйте свойство `transform` с функцией `rotate()`, передав ей значение `180deg`.

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

Результат

Сообщения

Выполнить

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

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

Поворот с использованием 'turn'

На странице есть фиолетовый ромб (квадрат, повернутый на 45 градусов). Примените к нему дополнительный поворот на четверть оборота (0.25 оборота) по часовой стрелке, используя единицу измерения 'turn'.

CSS

.rhombus {
  width: 80px;
  height: 80px;
  background-color: darkorchid;
  margin: 70px auto;
  /* Начальный поворот для создания ромба */
  transform: rotate(45deg);
  /* Добавьте еще один поворот ниже */
  input1: input2(input3);
}

                     .rhombus {
  width: 80px;
  height: 80px;
  background-color: darkorchid;
  margin: 70px auto;
  /* Начальный поворот для создания ромба */
  transform: rotate(45deg);
  /* Добавьте еще один поворот ниже */
  input1: input2(input3);
}

HTML

<div class="rhombus"></div>

Функция `rotate()` может принимать значения в разных единицах, включая `turn`. Один полный оборот равен `1turn`. Четверть оборота — это `0.25turn`. Добавьте `transform: rotate(0.25turn);` к существующему стилю.

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

Результат

Сообщения

Выполнить

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

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

Поворот нескольких элементов

На странице расположены три оранжевых блока с классом 'box'. Примените ко всем этим блокам поворот на 15 градусов по часовой стрелке.

CSS

.box {
  width: 60px;
  height: 60px;
  background-color: darkorange;
  margin: 20px;
  display: inline-block; /* Чтобы блоки были в ряд */
  input1: input2(input3);
}

                     .box {
  width: 60px;
  height: 60px;
  background-color: darkorange;
  margin: 20px;
  display: inline-block; /* Чтобы блоки были в ряд */
  input1: input2(input3);
}

HTML

<div style="text-align: center; margin-top: 50px;">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Используйте селектор класса `.box`, чтобы стили применились ко всем элементам с этим классом. Добавьте свойство `transform` с функцией `rotate(15deg)`.

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

Результат

Сообщения

Выполнить

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

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

Поворот при наведении (отрицательный угол)

На странице есть элемент в виде стрелки (с использованием псевдоэлемента). Сделайте так, чтобы при наведении на контейнер `.arrow-container`, стрелка поворачивалась на 60 градусов против часовой стрелки.

CSS

.arrow-container {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  position: relative;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid teal;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px; /* Половина ширины (border-left + border-right) */
  margin-top: -15px; /* Половина высоты (border-bottom) */
  transition: transform 0.4s ease-in-out;
}

.arrow-container:input1 .arrow {
  input2: input3(input4);
}

                     .arrow-container {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  position: relative;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid teal;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px; /* Половина ширины (border-left + border-right) */
  margin-top: -15px; /* Половина высоты (border-bottom) */
  transition: transform 0.4s ease-in-out;
}

.arrow-container:input1 .arrow {
  input2: input3(input4);
}

HTML

<div class="arrow-container">
  <div class="arrow"></div>
</div>

Используйте селектор `.arrow-container:hover .arrow` для стилизации стрелки при наведении на родительский контейнер. Примените `transform: rotate(-60deg);`. Не забудьте добавить `transition` к селектору `.arrow` для плавности.

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

Результат

Сообщения

Выполнить

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

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