AJAX загрузка
home

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

CSS3 трансформирование

Обратите внимание: свойства рассмотренные в данной главе работают во всех современных браузерах (IE9+, Safari, Chrome, Firefox, Opera), но для некоторых браузеров требуется добавления специальных префиксов. Для браузеров Chrome и Safari требуется префикс -webkit, для браузера IE версии 9 требуется префикс -ms (для IE10 данный префикс не требуется).

С помощью CSS3 свойства transform Вы можете трансформировать элементы. В качестве значения данного свойства должна указываться одна из функций трансформирования.

На данный момент в современных браузерах поддерживаются только 2D трансформации, но в будущем будут также доступны и 3D трансформации.

С помощью функции translate(x,y) Вы можете сместить элемент на указанное количество пикселей по горизонтали и вертикали.

Пример

#el2 {
transform: translate(180px,180px);
}


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

Пример

#el3 {
transform: rotate(45deg);
}
#el4 {
transform: rotate(120deg);
}


Быстрый просмотр

С помощью метода scale(x,y) Вы можете растянуть элемент в ширину или высоту.

Пример

#el6 {
transform:scale(1.3,1);
}


Быстрый просмотр

С помощью метода skew(x,y) Вы можете скосить элемент на указанное количество градусов по горизонтали и вертикали.

Пример

#el7 {
transform:skew(40deg,20deg);
}


Быстрый просмотр

CSS3 функции трансформирования

Функция Описание
translate(x,y) Смещает элемент от изначальной позиции по горизонтали и вертикали.
translateX(x) Смещает элемент по горизонтали.
translateY(y) Смещает элемент по вертикали.
scale(x,y) Растягивает элемент по вертикали и горизонтали.
scaleX(x) Растягивает элемент по горизонтали.
scaleY(y) Растягивает элемент по вертикали.
rotate(градусы) Поворачивает элемент по часовой стрелке.
skew(x,y) Скашивает элемент по горизонтали и вертикали.
skewX(x) Скашивает элемент по горизонтали.
skewY(y) Скашивает элемент по вертикали.
matrix(x,x,x,x,x,x) Совмещает все перечисленные выше методы в один.