Свойство transform: трансформация элементов

Свойство transform, внедренное в спецификации CSS3, позволяет преобразовывать (трансформировать) элементы веб-страницы несколькими способами. Среди значений, которые поддерживаются свойством, есть функции вращения, масштабирования, перемещения, наклона, а также трехмерные функции со своими специфическими особенностями. Каждое значение будет рассмотрено на отдельных страницах далее.

В каких случаях можно применять свойство transform? В любых, где вам требуется трансформация элемента. Например, когда вам необходимо реализовать сдвиг или приближение/отдаление элемента при наведении курсора либо просто разместить элемент с небольшим наклоном. Само собой, transform широко применяется в веб-анимации, но еще его нередко используют для позиционирования и центрирования элементов.

Поведение элементов

Следует учитывать, что трансформированные элементы не влияют на размещение своих соседей. Передвинутый, наклоненный, увеличенный элемент может перекрыть соседний, наложиться на него. Это работает так потому, что при рендеринге веб-страницы браузер резервирует для элемента то место, где он находился бы до трансформации, после чего применяет стили преобразования. Преобразованный элемент никак не затрагивает положение соседних элементов. Пожалуй, это логично, ведь в противном случае мы бы иногда наблюдали весьма странную картину на веб-странице.

Кроссбраузерность

Internet Explorer вплоть до 8-й версии не поддерживает трансформацию элементов. Для обеспечения корректной работы в других браузерах свойство CSS3 transform требует использования вендорных префиксов:

• -ms-transform — для Internet Explorer 9;
• -webkit-transform — для Chrome 35 и ранее, Safari до версии 8 включительно, Opera с версии 15 до 22, Android 4.4.4 и ранее, iOS Safari до версии 8.4 включительно;
• -o-transform — для браузера Opera 11.5;
• -moz-transform — для Firefox до версии 15 включительно.

В следующих частях урока, посвященного свойству transform, мы познакомимся со значениями, которые оно принимает. И начнем мы с функции вращения rotate().