С помощью CSS3 функций трансформирования Вы можете перемещать, поворачивать и растягивать элементы.
ТвитнутьОбратите внимание: свойства рассмотренные в данной главе работают во всех современных браузерах (IE9+, Safari, Chrome, Firefox, Opera), но для некоторых браузеров требуется добавления специальных префиксов. Для браузеров Chrome и Safari требуется префикс -webkit, для браузера IE версии 9 требуется префикс -ms (для IE10 данный префикс не требуется).
С помощью CSS3 свойства transform Вы можете трансформировать элементы. В качестве значения данного свойства должна указываться одна из функций трансформирования.
На данный момент в современных браузерах поддерживаются только 2D трансформации, но в будущем будут также доступны и 3D трансформации.
С помощью функции translate(x,y) Вы можете сместить элемент на указанное количество пикселей по горизонтали и вертикали.
С помощью функции rotate(градусы) Вы можете повернуть элемент на указанное количество градусов по часовой стрелке.
Пример
#el3 {
transform: rotate(45deg);
}
#el4 {
transform: rotate(120deg);
}
С помощью метода scale(x,y) Вы можете растянуть элемент в ширину или высоту.
С помощью метода skew(x,y) Вы можете скосить элемент на указанное количество градусов по горизонтали и вертикали.
| Функция | Описание |
|---|---|
| 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) | Совмещает все перечисленные выше методы в один. |