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

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

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

Список тем

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Теперь необходимо сдвинуть зеленый квадрат вниз на 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);`.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите красный квадрат одновременно на 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

Сместите оранжевый квадрат на 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()`.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите фиолетовый квадрат влево на 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);`.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите желтый квадрат вниз на 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%)`.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Сместите темно-синий квадрат по диагонали: на 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)

Сместите серый квадрат 'ближе' к наблюдателю на 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 смещение

Сместите розовый квадрат на 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);`.

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

Результат

Сообщения

Выполнить

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

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