• CSS3 Уроки

• CSS3 Уроки
• CSS3 Введение
• CSS3 Границы
• CSS3 Фон
• CSS3 Текстовые Эффекты
• CSS3 Шрифты
• CSS3 2D Трансформации
• CSS3 3D Трансформации
• CSS3 Переходы
• CSS3 Анимация
• CSS3 Многоколоночная Верстка
• CSS3 Интерфейс Пользователя

• CSS3 Справочники

• CSS3 Справочник
• CSS3 Единицы Измерения
• CSS3 Значения Цветов
• CSS3 Названия Цветов
• CSS3 HEX Значения Цветов

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

С помощью CSS3 трансформации мы можем перемещать, масштабировать, переворачивать, вращать и растягивать элементы.

Как Это Работает?

Трансформация - это эффект, который позволяет элементу менять форму, размер и положение.

Вы можете трансформировать ваши элементы, используя 2D (двухмерные) или 3D (трехмерные) трансформации.

Поддержка Браузерами

Internet Explorer 9 требует приставки -ms-.

Firefox требует приставки -moz-.

Chrome и Safari требуют приставки -webkit-.

Opera требует приставки -o-.

2D Трансформации

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

• translate()
• rotate()
• scale()
• skew()
• matrix()

Вы узнаете о 3D трансформациях в следующем уроке.

Пример div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari и Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } Попробуйте сами »

Метод translate()

С помощью метода translate() элемент перемещается из текущего положения в новое - в зависимости от параметров, заданных для левой (ось X) и верхней (ось Y) позиций:

Пример div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari и Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } Попробуйте сами »

Значение translate(50px,100px) перемещает элемент на 50 пикселов слева и на 100 пикселов сверху.

Метод rotate()

С помощью метода rotate(), элемент поворачивается по часовой стрелке на заданный угол. Допустимы отрицательные значения и повороты элемента против часовой стрелки.

Пример div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari и Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } Попробуйте сами »

Значение rotate(30deg) поворачивает элемент на 30 градусов по часовой стрелке.

Метод scale()

Посредством метода scale() элемент увеличивается или уменьшается в размере, в зависимости от параметров, заданных для ширины (ось X) и высоты (ось Y):

Пример div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari и Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ } Попробуйте сами »

Значение scale(2,4) трансформирует ширину, удваивая ее, и высоту, увеличивая ее в 4 раза, относительно исходного размера.

Метод skew()

Используя метод skew(), можно вращать элемент, задавая угол в параметрах для горизонтальных (ось X) и вертикальных (ось Y) линий:

Пример div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari и Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } Попробуйте сами »

Значение skew(30deg,20deg) разворачивает элемент на 30 градусов вокруг оси X и на 20 градусов вокруг оси Y.

Метод matrix()

Метод matrix() комбинирует все методы двухмерных трансформаций в один.

Метод matrix() принимает шесть параметров, передающихся математическим функциям, которые позволяют вам: поворачивать, масштабировать, перемещать (переносить) и разворачивать элементы.

Пример Как повернуть элемент div на 30 градусов, используя матричный метод: div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari и Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ } Попробуйте сами »

Новые Свойства Трансформации

Следующая таблица перечисляет все свойства трансформации:

Методы Двухмерной Трансформации