Практика использования правила transform CSS
Часто необходимо оживить элементы страницы, не прибегая к трудоемким вариантам использования JavaScript. Правило transform CSS - удобный инструмент для придания сложной динамики, на создание которой не потребуется много усилий.
Все основные действия по изменению элемента: положение, размеры, повороты, искривление и вращение — доступны в применении к основным элементам HTML-верстки, а в комбинации друг с другом позволяют создавать сложную динамику.
Основные возможности правила трансформации
Правило transform CSS предназначено для использования простых трансформаций элементов страницы и используется очень просто:
- transform: none;
- transform: функция ();
- transform: функция () функция () функция ();
В приведенном ниже примере перечислены основные функции, которые можно использовать для преобразования элементов, показано их действие на примерах.
Простые применения трансформаций связаны с кнопками и элементами реализации диалога с посетителем. Практично использование динамичных эффектов для сопровождения перемещений мышки или привлечение внимание к акциям по услугам или товарам, предлагаемым владельцем ресурса.
Трансформация востребована в меню, когда посетитель еще не выбрал нужное направление действий, но мышка уже на элементе: пункте меню. В этом случае что-то может трансформироваться: увеличиться в размере, наклониться, повернуться или иначе «дать понять», что страница «активна» и готова выполнить действие.
Удобно применение правила transform CSS для создания подсказок и комментариев к элементам страницы. Посетитель не всегда ориентируется на странице, особенно когда он пришел впервые. По традиции, каждый разработчик сайта считает, что дизайн веб-ресурса и диалог с посетителем - это его сфера компетенции.
С точки зрения посетителя, ему решать, какой функционал он ожидает от сайта, на который пришел, каким должен быть дизайн и диалог. Если что-то тут не нравится, он найдет себе то, что нравится на другом веб-ресурсе.
Совмещение элементов при трансформации
Анимация transform CSS допускается через несколько функций в одном правиле. Можно задавать положительные и отрицательные значения трансформаций, важно чтобы они имели смысл.
В примере показано, как меняет свой облик картинка при наведении мышки, если правило трансформации включает в себя сразу:
- масштабирование;
- поворот
- сдвиг.
Тройной эффект спланировать легко, но часто без длительного подбора значений не обойтись. Одно дело, когда одним правилом можно точно определить нужные изменения: они известны. Другое - когда приходится придумывать динамику согласно смыслу элемента.
В некоторых случаях лучше совместить, например: два дива вложены друг в друга. Внешнему назначено одно правило трансформации, внутреннему - другое. Когда общая логика нужных изменений будет определена, то можно ее перенести на правило одного элемента.
В примере, результирующее решение напоминает преобразование в трехмерном пространстве, но это не имеет отношения к правилам CSS 3D transform. Учет оси Z и манипуляции с обратной стороной элемента - это отдельная группа свойств и правил.
Однако, какая бы ни была графическая идея, все трансформации производятся на плоскости, эффекты образуются за счет визуально восприятия и корректного изменения форм элементов. Содержание элементов и рисунок линий имеют значение.
Особенности правил CSS
По общему правилу CSS, transform style - это статическая логика преобразований элементов, алгоритм которой не может быть изменен после того, как набор правил сформулирован.
Это не выходит за рамки концепции таблиц каскадных стилей, но в каждом конкретном применении приходится учитывать тот фактор, что динамика здесь не имеет ни событий, ни условий, ни возможности манипулировать самим процессом.
Разработчик может только лишь сформулировать желаемое правило transform, и CSS исполнит его в точности. Изменить потом или в процессе функционирования веб-ресурса будет ничего нельзя.
Более того, имеют существенное значение размеры блока, его содержание, форма и цвет внутренних элементов. Используя правила прозрачности (opacity), можно получать сложные изображения, а накладывая их друг на друга - сложные эффекты.
Существенным обстоятельством является неуправляемость всех трансформаций. Все правила исполняются конкретными алгоритмами, воспринимающими только те значения, которые указаны в параметрах функций преобразования. Правильное сочетание функций и их значений определяет результирующий алгоритм трансформации.
Следует учитывать, что изменение содержания элемента, особенно свойства background-image, может привести к «вздрагиванию» - нарушению нужной логики трансформации за счет технических особенностей реализации (браузер, протокол, сервер, иное). Имеет смысл скрывать элемент перед изменением его содержания: показывать и продолжать, когда процесс обновления уже завершен.
Участие сервера в трансформации
Если от необходимости полного обновления страницы разработчики ушли достаточно давно и технологии типа AJAX стали нормой для отображения и обновления элементов страницы, то вполне ожидаемой является динамика изменений таблиц стилей в процессе работы веб-ресурса.
Традиционный подход, когда страницы формировались разработчиком и сайт сдавался в эксплуатацию как есть - уже несовременно. Почему бы не разрабатывать весь комплект файлов сайта, как результат динамики диалога с посетителем: «на лету».
Применение JavaScript + AJAX - это динамика элемента, но использование серверного языка для изменения файла CSS - вполне разумная дополнительная возможность. Посетители разнятся не только по темпераменту работы, но и по той функциональности, которую они ожидают и способности ее отображения.
Предлагая необходимый функционал в формате адаптируемой динамики (изменяя правила CSS на лету), можно достичь больших успехов и изменить рейтинг веб-ресурса в лучшую сторону.