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

Верстка

Рисунок Трансформация в CSS3
Трансформация в CSS3 Трансформация в CSS3
оценка: 3.5 из 5
оценок: 6

Сегодня изучим свойство 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):
Code
transform // CSS3
-o-transform // Opera 11+
-moz-transform // Firefox 3.6+
-webkit-transform // Google Chrome, Safari 4+
-ms-transform // Internet Explorer 10+

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

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

Translate

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

Code
transform: translate( dx [, dy] );
  • dx - смещение по горизонтали. Еденица измерения - любая из CSS. Возможно отрицательное значение для смещения влево.
  • dy - смещение по вертикали. Еденица измерения - любая из CSS. Возможно отрицательное значение для смещения вверх. По умолчанию - 0.

Пример:

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

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

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

Scale

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

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

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

Пример:

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

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

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

Skew

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

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

Пример:

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

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

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

Rotate

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

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

Пример:

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

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

Matrix

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

Code
transform: matrix( ax, ay, bx, by, dx, dy );
  • 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




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

rss
Категория:Верстка
Просмотрено:16057
Рейтинг:3.5/6
Дата добавления:2011-11-24 09:37, Четверг
Добавил:Szen
Теги:CSS3, transform, поворот на угол, трансформация, поворот

Мини-форум

№ 02011-11-24 09:37
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Трансформация в CSS3".
Гость
Учавствовать в обсуждении "Трансформация в CSS3" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 121
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz