Двумерные трансформации / Перемещение по горизонтали [1/32]
×

Перемещение по горизонтали [1/32]

В этом курсе мы рассмотрим возможности двухмерных трансформаций в CSS.

То, что раньше можно было сделать в окне браузера только с помощью JavaScript — плавное перемещение и масштабирование блоков, повороты и наклоны — теперь с лёгкостью реализуется на чистом CSS.

Для начала давайте разберёмся с системой координат, в которой перемещается объект:

её ключевой особенностью является то, что ось Y направлена вниз, а не вверх, так как веб-страница начинается с левого верхнего угла и идет вниз, а в CSS используется обратная система координат.

Первое перемещение, которое мы осуществим — горизонтальное. Мы будем двигать объекты влево и вправо.

Для этой и других трансформаций используется следующий синтаксис:

transform: [функция трансформации]([значение трансформации])

Горизонтальное перемещение осуществляется функцией translateX. Значение функции трансформации численное, а возможные единицы измерения — px, %, em или in.
Например, такая функция переместит объект на 100 пикселей вправо по оси X:

transform: translateX(100px)

Кстати, знакомьтесь! Главного героя, которым вам предстоит управлять и трансформировать его заклинаниями окружающий мир, зовут Пендальф Синий. Вместе с ним вас ждёт увлекательное приключение…


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Перемещение по горизонтали</title> <meta charset="utf-8"> <base href="/assets/course71/"> <link rel="stylesheet" href="world.css"> </head> <body> <div class="world"> <div class="wizard"></div> <div class="tree"></div> </div> </body> </html>
CSS
.wizard { top: 244px; left: 30px; } .tree { top: 178px; right: 30px; }
HTML Academy
  1. Добавьте блоку .wizard свойство transform со значением translateX(250px) и переместите мага вправо.
  2. А затем верните его обратно, добавив к свойству трансформации ещё одно значение перемещения:
    transform: translateX(250px) translateX(-250px);
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.