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

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

На этой странице собраны упражнения для отработки навыков использования функции `skew()` в CSS трансформациях. Задания помогут вам научиться наклонять элементы по осям X и Y, использовать сокращенную запись `skew()`, применять трансформации при наведении и изменять точку трансформации с помощью `transform-origin`. Каждое задание содержит HTML-структуру и CSS-стили с пропусками, которые вам предстоит заполнить, чтобы добиться нужного визуального эффекта. Сложность заданий постепенно возрастает, начиная с простого наклона одного элемента и заканчивая более комплексными сценариями.

Список тем

Наклон по оси X

В этом задании нужно наклонить синий квадрат по горизонтальной оси (X) на 20 градусов. Заполните пропуски в CSS коде, чтобы применить соответствующую трансформацию.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  margin: 50px auto;
  /* Примените трансформацию наклона по оси X */
  input1: input2(input3);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  margin: 50px auto;
  /* Примените трансформацию наклона по оси X */
  input1: input2(input3);
}

HTML

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

Используйте свойство `transform` и функцию `skewX()` с нужным значением угла в градусах (`deg`). Например, `transform: skewX(20deg);`.

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

Результат

Сообщения

Выполнить

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

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

Наклон по оси Y

Теперь наклоните зеленый квадрат по вертикальной оси (Y) на -15 градусов. Заполните пропуски в CSS, чтобы достичь этого эффекта.

CSS

.shape {
  width: 120px;
  height: 120px;
  background-color: #28a745;
  margin: 60px auto;
  /* Примените трансформацию наклона по оси Y */
  input1: input2(-15deg);
}

                     .shape {
  width: 120px;
  height: 120px;
  background-color: #28a745;
  margin: 60px auto;
  /* Примените трансформацию наклона по оси Y */
  input1: input2(-15deg);
}

HTML

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

Используйте свойство `transform` и функцию `skewY()` с отрицательным значением угла в градусах (`deg`). Например, `transform: skewY(-15deg);`.

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

Результат

Сообщения

Выполнить

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

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

Комбинированный наклон

Используйте сокращенную функцию `skew()`, чтобы одновременно наклонить красный прямоугольник на 30 градусов по оси X и на 10 градусов по оси Y.

CSS

.rectangle {
  width: 150px;
  height: 80px;
  background-color: #dc3545;
  margin: 70px auto;
  /* Примените комбинированный наклон */
  transform: input1(input2, input3);
}

                     .rectangle {
  width: 150px;
  height: 80px;
  background-color: #dc3545;
  margin: 70px auto;
  /* Примените комбинированный наклон */
  transform: input1(input2, input3);
}

HTML

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

Сокращенная функция `skew()` принимает два значения: угол наклона по оси X и угол наклона по оси Y. Например, `transform: skew(30deg, 10deg);`.

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

Результат

Сообщения

Выполнить

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

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

Наклон при наведении

Сделайте так, чтобы желтый круг наклонялся по оси X на 25 градусов при наведении на него курсора мыши. Добавьте плавный переход для этой трансформации.

CSS

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

.circle:input2 {
  /* Наклоните круг при наведении */
  input3: input4(25deg);
}

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

.circle:input2 {
  /* Наклоните круг при наведении */
  input3: input4(25deg);
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Наклон изображения

Наклоните изображение по вертикальной оси (Y) на -10 градусов. Заполните пропуски в CSS.

CSS

.image-container {
  width: 200px;
  margin: 40px auto;
  border: 1px solid #ccc;
  overflow: hidden; /* Чтобы скрыть части изображения, выходящие за рамки */
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  /* Наклоните изображение */
  input1: input2(-10deg);
}

                     .image-container {
  width: 200px;
  margin: 40px auto;
  border: 1px solid #ccc;
  overflow: hidden; /* Чтобы скрыть части изображения, выходящие за рамки */
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  /* Наклоните изображение */
  input1: input2(-10deg);
}

HTML

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

Примените свойство `transform` с функцией `skewY()` и значением `-10deg` к селектору изображения (`img`).

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

Результат

Сообщения

Выполнить

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

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

Наклон с измененным центром трансформации

Наклоните бирюзовый квадрат по оси X на 30 градусов, но сделайте так, чтобы трансформация происходила относительно нижнего левого угла элемента.

CSS

.element {
  width: 100px;
  height: 100px;
  background-color: #17a2b8;
  margin: 80px auto;
  /* Установите центр трансформации */
  input1: input2 input3;
  /* Примените наклон */
  input4: skewX(30deg);
}

                     .element {
  width: 100px;
  height: 100px;
  background-color: #17a2b8;
  margin: 80px auto;
  /* Установите центр трансформации */
  input1: input2 input3;
  /* Примените наклон */
  input4: skewX(30deg);
}

HTML

<div class="element"></div>

Используйте свойство `transform-origin` со значением `left bottom` (или `0% 100%`) перед применением трансформации `transform: skewX(30deg);`.

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

Результат

Сообщения

Выполнить

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

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

Наклон текста внутри блока

Наклоните только текст 'Skew Me!' внутри серого блока по оси X на 15 градусов, не наклоняя сам блок.

CSS

.container {
  width: 200px;
  padding: 20px;
  background-color: #6c757d;
  margin: 50px auto;
  text-align: center;
}

.container span {
  color: white;
  font-size: 24px;
  font-weight: bold;
  /* Сделайте элемент блочным или инлайн-блочным */
  input1: input2;
  /* Наклоните текст */
  input3: input4(15deg);
}

                     .container {
  width: 200px;
  padding: 20px;
  background-color: #6c757d;
  margin: 50px auto;
  text-align: center;
}

.container span {
  color: white;
  font-size: 24px;
  font-weight: bold;
  /* Сделайте элемент блочным или инлайн-блочным */
  input1: input2;
  /* Наклоните текст */
  input3: input4(15deg);
}

HTML

<div class="container">
  <span>Skew Me!</span>
</div>

Чтобы наклонить только текст, примените трансформацию `transform: skewX(15deg);` к элементу, содержащему текст (в данном случае `span`). Важно также сделать этот `span` блочным или инлайн-блочным (`display: inline-block;` или `display: block;`), чтобы трансформация сработала корректно.

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

Результат

Сообщения

Выполнить

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

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