Двумерная трансформация

Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами, телепортироваться и использовать телекинез. Ну и, конечно, разберём крутые приёмы использования трансформаций для создания декоративных эффектов.

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

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

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

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

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

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

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

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

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

transform: translateX(100px)

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

Перемещение по вертикали[2/32]

Теперь давайте попробуем перемещать объекты по вертикали.

Для этого воспользуемся похожей на «горизонтальную» функциейtranslateY:

transform: translateY(-100px)

Такая функция переместит объект на 100 пикселей вертикально вверх. Заметьте, что для движения вверх используется отрицательное значение трансформации.

Как вы уже увидели в предыдущем задании, к объекту может быть одновременно применено несколько функций трансформации. При этом функции просто перечисляются через пробел после имени свойстваtransform, например:

transform: translateY(-100px) translateX(100px)

Такая трансформация переместит объект на 100 пикселей вправо и вверх по оси координат.

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

И конечно же надо не забыть прочитать заклинание левитации, чтобы волшебник мог лететь!

Тренировка фаерболов[3/32]

В опасном мире фэнтези, где за каждым углом поджидает тролль или оборотень, Пендальф должен уметь постоять за себя. А лучшее средство атаки и защиты для любого уважающего себя боевого мага — это, как известно, фаерболы.

Давайте научимся бросать фаерболы по мишеням, чтобы в случае необходимости защитить Пендальфа от врагов.

Для этого применим изученные ранее заклинания перемещения:translateX,translateY, а также новое более лаконичное заклинание, объединяющее перемещение сразу по двум осям в одну функцию —translate:

transform: translate(перемещение по оси X [, перемещение по оси Y])

Как мы видим, два значения перемещения просто перечисляются через запятую, причём у них могут быть разные единицы измерения.

Значение перемещения по оси Y является необязательным аргументом, то есть если его не указать, а написатьtranslate(перемещение по оси X), то значение перемещения по Y будет считаться равным0и функция будет работать аналогичноtranslateX.

Приступим же наконец к огненным процедурам!

Увеличение, уменьшение[4/32]

Ещё одной возможностью CSS-трансформаций является масштабирование блоков. С помощью функцииscaleможно увеличивать или уменьшать элементы.

Значением этой функции может быть любое число. При этом значение1считается точкой отсчёта, когда блок имеет оригинальные размеры. Рассмотрим примеры:

• scale(0.5)уменьшит объект в 2 раза;
• scale(2)увеличит объект в 2 раза;
• scale(0)полностью «схлопнет» объект, и его не будет видно;
• scale(1)оставит объект без изменений.

Вообще функцияscaleкак иtranslateпринимает 2 аргумента:

scale(масштаб-по-X [, масштаб-по-Y])

Еслимасштаб-по-Yне задан, то считается, что он такой же, какмасштаб-по-X:

transform: scale(2) то же самое, что transform: scale(2, 2)

Также в случае, когда необходимо масштабировать объект только по одной оси независимо от другой, существуют функцииscaleX(масштаб-по-Х)иscaleY(масштаб-по-Y).

Защита города[5/32]

Вот и пришла пора впервые с пользой применить полученные знания: рано утром на город, где живёт Пендальф, напал волк!

В суматохе наш волшебник не успел наколдовать фаерболы, поэтому придётся в срочном порядке починить развалившуюся ограду.

Для этого нужно собраться и быстро вспомнить всё, а также освоить пару новых приёмов.

В этом задании нам понадобится трансформация c функцией поворотаtransform: rotate. Её синтаксис:transform: rotate(угол наклона).

Положительное значение угла повернёт объект по часовой стрелке, а отрицательное — против. Единица измерения поворота — градусыdeg, например:transform: rotate(180deg)повернёт объект на180°по часовой стрелке, то есть перевернёт его.

При совместном применении трансформации поворота и перемещения есть небольшая тонкость. При повороте вместе с объектом на заданный угол поворачивается и вся его система координат:

То есть, чтобы повёрнутый на90°блок двигать по горизонтали, нужно применятьtranslateY, а по вертикали —translateX.

Битва — часть 2[9/32]

Во время ночлега в неуютной пещере Пендальф решает скоротать время и поучиться CSS-магии ещё немного.

Ещё одна возможность CSS-трансформаций — наклон объекта по осям X и Y под заданным углом. Наклоны создаются с помощью функцийskewXиskewY.

Угол наклона задаётся в градусах —deg. Например:

transform: skewX(45deg)
transform: skewY(30deg)

Для оси X положительное значение угла наклоняет объект влево, а отрицательное — вправо. Для оси Y — вниз и вверх соответственно.

В примере ниже первый блок наклонён на25°влево, а второй — на25°вниз:

transform: skewX(25deg);transform: skewY(25deg);

Заметим, что наряду соskewXиskewYсуществует обобщающая функцияskew, которая принимает два аргумента:skew(наклон-по-Х [, наклон-по-Y]). Значение наклона по оси Y является необязательным аргументом и по умолчанию равно0. Но при этом поведение функцииskewпри трансформации отличается от одновременного примененияskewXиskewY. Исторически так сложилось, что реализацияskewв браузерах поддерживается сейчас только для совместимости прежнего контента, и даже исключалась из рабочего черновика спецификации CSS. В общем, вместоskewлучше пользоватьсяskewXиskewY.

И что бы вы думали? Как только Пендальф выучился новому заклинанию, к нему в гости пожаловал пещерный монстр, немного смахивающий на дракона. Что-то подсказало Пендальфу, что фаерболами убедить гостя уйти восвояси не выйдет…

Финальная битва[13/32]

Перфекционизм никогда до добра не доводил. Не довёл и сейчас — собранный кристалл оказался ловушкой. Дух побеждённого злодея вселился в душу Пендальфа и телепортировал его в непонятную и неизвестную комнату.

А во время телепортации он успел изучить ещё одну интересную особенностьtransform: scale. А именно то, как ведёт себя объект при задании отрицательных числовых значений: приscaleX(-1), например, оригинальный объект зеркально отражается по горизонтали, а приscale(-1, -1)— отражается и по оси X, и Y. Большее, чем-1значение ещё шире растянет отзеркалированный объект.

Также в пути Пендальф успел прочитать брошюру «Битва с самим собой» и понял, что ему надо вызвать на дуэль своего двойника, но при этом никоим образом нельзя повреждать его, ведь тем самым он поразит себя. Как одолеть его — неизвестно, но пути назад уже не было, он решил искоренить древнее зло раз и навсегда…

Особенности transform-origin — часть 1[14/32]

Теперь, когда древнее зло побеждено, а Пендальф добрался обратно домой, самое время разобраться с ещё одной тонкостью трансформаций, а именно со свойствомtransform-origin(а также повесить памятную фотокарточку на стену).

Это свойство используется совместно со свойствомtransformи задаёт точку отсчёта системы координат, в рамках которой будет работать трансформация.

Синтаксисtransform-originдля двухмерных трансформаций следующий:

transform-origin: точка-отсчёта-по-X [, точка-отсчёта-по-Y]

Значения свойства задаётся в единицах измерения ширины в браузере (px,em…), в%, а также ключевыми словамиleft,right,top,bottomиcenter.

По умолчанию, значениеtransform-originравно50% 50%, то есть начало системы координат находится в центре объекта. Если не указывать значениеточка-отсчёта-по-Y, то оно считается равным50%.

Давайте разберёмся на примере функцииscale, как ведёт себя трансформация при различных значенияхtransform-origin: в данном случае блок будет менять размер относительно заданной точки.

Особенности transform-origin — часть 2[15/32]

А теперь попробуем сделать трансформацию плавной. Для этого в CSS предусмотрено свойствоtransition. Не будем пока вдаваться в подробности, как именно работает и применяетсяtransition— это будет подробно рассмотрено в ближайшем курсе.

Если в двух словах,transitionпозволяет изменить значение какого-либо свойства плавно. В нашем случае плавно будет меняться свойствоtransformс функциейscale, а переход между двумя значениями будет длиться полсекунды.

Всё это наглядно покажет, как при разных значенияхtransform-originменяется точка начала системы координат. Для демонстрации этого давайте задавать значенияtransform-originи нажимать кнопку «Запустить», по которой для блока.pictureпереключается классactive.