Трансформация в CSS3

Сегодня изучим свойство CSS3 transform. Это свойство трансформирует выбранные элементы DOM на странице. Возможны следующие виды трансформации: поворот на угол, масштабирование, отражение, сдвиг, наклон, перспектива и трансформация по матрице. При этом, возможны изменения как в двумерном пространстве, так и в трехмерном. По сути, это CSS3 свойство похоже на функцию трансформации изображения в графическом редакторе PhotoShop. Таким образом, только используя CSS3 определения можно изменить любой элемент на странице до неузнаваемости.

Этот материал будет большим, так как я постараюсь описать все возможные виды CSS3 трансформации. Поэтому наберитесь терпения. Все варианты трансформации будут с рабочими примерами. Если какой-либо пример не работает, то это может означать, что ваш браузер не поддерживает данного CSS3 свойства. Рекомендация одна - обновите браузер, или замените ваш Internet Explorer на какой-нибудь другой браузер.

Трансформация в CSS3 создается при помощи свойства transform. Действует это свойство только для элементов типа block (DIV, P и т.п.) или inline-block (IMG, INPUT и т.п.). Значением свойсту transform передается функция трансформации. Каждому элементу на странице можно задать несколько трансформаций. Для этого нужно перечислять функции в свойстве transform через пробел.

Трансформации поддерживаются браузерами IE10, FF3.6+, Safari 4+, Google Chrome, Opera 11+. Для старых IE есть заплатки, но использовать их не стоит.

Для работы в большинстве браузеров нужно использовать несколько записей трансформации следующего вида (параметры такие же, как и для свойства transform):

Список функций трансформации:

• Translate
• Scale
• Skew
• Rotate
• Matrix

Рассмотрим каждую функцию трансформации отдельно.

Translate

Функция смещает элемент на определенное расстояние от текущего положения по горизонтали или вертикали.

• dx - смещение по горизонтали. Еденица измерения - любая из CSS. Возможно отрицательное значение для смещения влево.
• dy - смещение по вертикали. Еденица измерения - любая из CSS. Возможно отрицательное значение для смещения вверх. По умолчанию - 0.

Пример:

Блок со смещением.
transform: translate(50px, 5px);

Также существуют такие функции как translateX(dx) и translateY(dy), которые смещают елемент по горизонтали и вертикали.

К содержанию.

Scale

Масштабирует элемент на странице (увеличение, уменьшение, отражение).

• dx - кратность масштабирования по горизонтали. Занчение 1 соответствует текущему размеру. Большее значение увеличивает объект, меньшее - уменьшает. Отрицательное значение отражает элемент слева-направо.
• dy - кратность масштабирования по вертикали. Занчение 1 соответствует текущему размеру. Большее значение увеличивает объект, меньшее - уменьшает. Отрицательное значение отражает элемент сверху-вниз.

Если задано только одно значение, то оно будет применено для масштабирования как по горизонтали, так и по вертикали.

Пример:

Блок с масштабированием.
transform: scale(-1.5, 1);

Существуют две похожие функции: scaleX(dx) и scaleY(dy). Они масштабируют элемент только в одну сторону, либо по-горизонтали, либо по-вертикали.

К содержанию.

Skew

Функция skew наклоняет элемент страницы на определенный градус как по горизонтали, так и по вертикали.

• dx - задается наклон элемента по горизонтали. Значение указывается в градусах (deg). Отрицательное значение наклоняет элемент в противоположную сторону.
• dy - задается наклон элемента по вертикали. Значение указывается в градусах (deg). Отрицательное значение наклоняет элемент в противоположную сторону. Значение по-умолчанию - 0.

Пример:

Блок с наклоном.
transform: skew(5deg, 5deg);

Две похожие функции: skewX(dx) и skewY(dy). Они наклоняют элемент только в одну сторону, либо по-горизонтали, либо по-вертикали.

К содержанию.

Rotate

Функция rotate позволяет повернуть блок на угол.

• deg - градус поворота элемента по часовой стрелке. Если введено отрицательное число, то элемент будет повернут против часовой стрелки.

Пример:

Блок с поворотом.
transform: rotate( 10deg );

К содержанию.

Matrix

Функция matrix позволяет сделать любую трансформацию элемента, аналогично функций выше. Она более сложна к пониманию, но и дает больше возможностей.

• ax, ay, bx, by - коэфициенты трансформации в двумерной матрице. Вычисляются особыми способами. Рассмотрим это вычисление в одном из следующих материалов.
• dx - смещение координат по горизонтали.
• dy - смещение координат по вертикали.

Пример:

Блок с матрицей трансформации.
transform: matrix( 1, -0.1763, 0.1763, 1, 0, 0 );

К содержанию.

Итог

Компонуя нужные трансформации можно придать элементу желаемую форму. Для примера, скомпонуем поворот на 10 градусов, наклон по горизонтали на 20 градусов и масштаб в 1.3 раз по вертикали:

Составная компоновка трансформаций.
transform: rotate(10deg) skew(20deg) scaleY(1.3);

На этом все, удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }

• 1
• 2
• 3
• 4
• 5

Google+

Трансформация в CSS3
Верстка
Скрипты, инструкции, справочники