Трансформации: rotate [Модуль 8: Трансформации и переходы]: Тренажер CSS

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

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

Список тем

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

id: 37419_css-transform-rotate-1

На странице есть синий квадрат. Ваша задача — повернуть этот квадрат на 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`).

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

Результат

Сообщения

Выполнить

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

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

id: 37419_css-transform-rotate-2

На странице есть зеленый прямоугольник. Поверните его на 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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37419_css-transform-rotate-3

Имеется красный круг. Сделайте так, чтобы при наведении курсора мыши на круг, он плавно поворачивался на 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;`).

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

Результат

Сообщения

Выполнить

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

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

id: 37419_css-transform-rotate-4

На странице отображается изображение. Ваша задача — повернуть его на 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'

id: 37419_css-transform-rotate-5

На странице есть фиолетовый ромб (квадрат, повернутый на 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);` к существующему стилю.

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

Результат

Сообщения

Выполнить

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

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

id: 37419_css-transform-rotate-6

На странице расположены три оранжевых блока с классом '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)`.

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

Результат

Сообщения

Выполнить

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

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

id: 37419_css-transform-rotate-7

На странице есть элемент в виде стрелки (с использованием псевдоэлемента). Сделайте так, чтобы при наведении на контейнер `.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` для плавности.

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

Результат

Сообщения

Выполнить

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