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

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

В этой серии заданий вы попрактикуетесь в использовании функции `translate()` свойства `transform` в CSS. Вам предстоит перемещать элементы по горизонтали, вертикали и в обеих плоскостях одновременно, заполняя пропущенные части CSS-кода. Задания построены от простого к сложному, чтобы вы могли постепенно освоить различные аспекты использования `translate()`, включая разные оси и единицы измерения. Теории здесь нет – только практика!

Список тем

Горизонтальное смещение

id: 37417_translate-01-horizontal

Ваша задача — сдвинуть синий квадрат вправо на 50 пикселей от его первоначального положения. Для этого вам нужно использовать соответствующую функцию трансформации.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  /* Сместите элемент вправо на 50px */
  transform: input1(50px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  /* Сместите элемент вправо на 50px */
  transform: input1(50px);
}

HTML

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

Чтобы сместить элемент по горизонтали, используйте функцию `translateX()` внутри свойства `transform`. Укажите значение смещения в пикселях (px). Например: `transform: translateX(50px);`.

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

Результат

Сообщения

Выполнить

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

Вертикальное смещение

id: 37417_translate-02-vertical

Теперь необходимо сдвинуть зеленый квадрат вниз на 30 пикселей от его исходной позиции. Используйте правильную функцию трансформации для вертикального перемещения.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  /* Сместите элемент вниз на 30px */
  transform: input1(30px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  /* Сместите элемент вниз на 30px */
  transform: input1(30px);
}

HTML

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

Для смещения элемента по вертикали применяется функция `translateY()` внутри свойства `transform`. Укажите значение смещения в пикселях (px). Например: `transform: translateY(30px);`.

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

Результат

Сообщения

Выполнить

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

Диагональное смещение

id: 37417_translate-03-diagonal

Сместите красный квадрат одновременно на 40 пикселей вправо и на 20 пикселей вниз. Используйте универсальную функцию `translate()` для задания смещения по обеим осям.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  /* Сместите элемент на 40px вправо и 20px вниз */
  transform: input1(40px, 20px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  /* Сместите элемент на 40px вправо и 20px вниз */
  transform: input1(40px, 20px);
}

HTML

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

Функция `translate()` может принимать два значения: первое для смещения по оси X, второе — по оси Y. Значения разделяются запятой. Например: `transform: translate(40px, 20px);`.

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

Результат

Сообщения

Выполнить

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

Использование свойства transform

id: 37417_translate-04-property

Сместите оранжевый квадрат на 60 пикселей вправо. В этом задании пропущено само CSS-свойство, отвечающее за трансформации.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #e67e22;
  /* Укажите свойство для смещения элемента вправо на 60px */
  input1: translateX(60px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #e67e22;
  /* Укажите свойство для смещения элемента вправо на 60px */
  input1: translateX(60px);
}

HTML

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

Все 2D и 3D трансформации применяются с помощью CSS-свойства `transform`. Внутри этого свойства указывается нужная функция, например `translateX()`.

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

Результат

Сообщения

Выполнить

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

Смещение в противоположную сторону

id: 37417_translate-05-negative

Сместите фиолетовый квадрат влево на 25 пикселей и вверх на 15 пикселей. Используйте функцию `translate()` с отрицательными значениями.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  /* Сместите элемент на 25px влево и 15px вверх */
  transform: input1(-25px, -15px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  /* Сместите элемент на 25px влево и 15px вверх */
  transform: input1(-25px, -15px);
}

HTML

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

Для смещения влево или вверх используйте отрицательные значения в функции `translate()`. Первое значение отвечает за ось X (влево - отрицательное), второе - за ось Y (вверх - отрицательное). Например: `transform: translate(-25px, -15px);`.

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

Результат

Сообщения

Выполнить

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

Процентное смещение

id: 37417_translate-06-percentage

Сместите желтый квадрат вниз на 50% от его собственной высоты. Используйте функцию `translateY()` с процентным значением.

CSS

.box {
  width: 60px;
  height: 60px;
  background-color: #f1c40f;
  /* Сместите элемент вниз на 50% его высоты */
  transform: input1(50%);
}

                     .box {
  width: 60px;
  height: 60px;
  background-color: #f1c40f;
  /* Сместите элемент вниз на 50% его высоты */
  transform: input1(50%);
}

HTML

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

Функции `translate` могут принимать значения в процентах. Проценты по оси Y рассчитываются относительно высоты самого элемента. Используйте `translateY(50%)`.

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

Результат

Сообщения

Выполнить

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

Смещение при наведении

id: 37417_translate-07-hover

Сделайте так, чтобы бирюзовый квадрат смещался на 20 пикселей вправо при наведении на него курсора мыши. Вам нужно добавить трансформацию для состояния `:hover`.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #1abc9c;
  transition: transform 0.3s ease; /* Плавный переход */
}

.box:hover {
  /* Сместите элемент вправо на 20px при наведении */
  input1: translateX(20px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #1abc9c;
  transition: transform 0.3s ease; /* Плавный переход */
}

.box:hover {
  /* Сместите элемент вправо на 20px при наведении */
  input1: translateX(20px);
}

HTML

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

Чтобы применить трансформацию при наведении, используйте псевдокласс `:hover` для селектора элемента. Внутри правила для `:hover` укажите свойство `transform` с нужной функцией, например `translateX(20px)`.

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

Результат

Сообщения

Выполнить

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

Несколько пропусков

id: 37417_translate-08-multiple-inputs

Сместите темно-синий квадрат по диагонали: на 30 пикселей вправо и на 30 пикселей вниз. В этом задании пропущено и свойство трансформации, и сама функция.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #34495e;
  /* Сместите элемент на 30px вправо и 30px вниз */
  input1: input2(30px, 30px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #34495e;
  /* Сместите элемент на 30px вправо и 30px вниз */
  input1: input2(30px, 30px);
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

Смещение по оси Z (3D)

id: 37417_translate-09-z-axis

Сместите серый квадрат 'ближе' к наблюдателю на 50 пикселей по оси Z. Для этого используйте соответствующую функцию 3D-трансформации. Обратите внимание на свойство `perspective` у родителя.

CSS

.container {
  perspective: 300px; /* Создаем 3D-пространство */
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  margin: 50px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #7f8c8d;
  margin: 25px; /* Центрируем для наглядности */
  /* Сместите элемент 'ближе' на 50px */
  transform: input1(50px);
}

                     .container {
  perspective: 300px; /* Создаем 3D-пространство */
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  margin: 50px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #7f8c8d;
  margin: 25px; /* Центрируем для наглядности */
  /* Сместите элемент 'ближе' на 50px */
  transform: input1(50px);
}

HTML

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

Для смещения элемента по оси Z (вглубь или наружу экрана) используется функция `translateZ()`. Положительное значение приближает элемент, отрицательное — удаляет. Не забудьте про свойство `perspective` у родительского контейнера для создания эффекта 3D. Пример: `transform: translateZ(50px);`.

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

Результат

Сообщения

Выполнить

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

Комбинированное 3D смещение

id: 37417_translate-10-3d

Сместите розовый квадрат на 20 пикселей вправо, 10 пикселей вверх и 'приблизьте' его на 30 пикселей. Используйте универсальную функцию `translate3d()`.

CSS

.container {
  perspective: 400px;
  width: 150px;
  height: 150px;
  border: 1px dashed #ccc;
  margin: 50px;
}

.box {
  width: 60px;
  height: 60px;
  background-color: #ff79c6;
  margin: 45px; /* Центрируем */
  /* Сместите на 20px вправо, 10px вверх, 30px 'ближе' */
  transform: input1(20px, -10px, 30px);
}

                     .container {
  perspective: 400px;
  width: 150px;
  height: 150px;
  border: 1px dashed #ccc;
  margin: 50px;
}

.box {
  width: 60px;
  height: 60px;
  background-color: #ff79c6;
  margin: 45px; /* Центрируем */
  /* Сместите на 20px вправо, 10px вверх, 30px 'ближе' */
  transform: input1(20px, -10px, 30px);
}

HTML

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

Функция `translate3d()` позволяет задать смещение сразу по трем осям: X, Y и Z. Значения указываются через запятую. Помните, что для оси Y отрицательное значение означает смещение вверх. Пример: `transform: translate3d(20px, -10px, 30px);`.

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

Результат

Сообщения

Выполнить

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