Пример
#el1 {
transform:translate(100px,30px);
}
#el2 {
transform:rotate(10deg);
}
#el3 {
transform:scale(1.5,2);
}
#el4 {
transform:skew(10deg,10deg);
}
Обратите внимание: данное свойство поддерживается в IE10+, Firefox и Opera. Для браузеров Chrome и Safari требуется префикс -webkit, для Interner Explorer версии 9 префикс -ms (поддерживаются только 2D трансформации).
С помощью свойства transform Вы можете трансформировать элементы различными способами.
В качестве значения данного свойства должна указываться одна из функций трансформирования ниже:
| Функция | Описание |
|---|---|
| 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) | Трансформирует элемент с помощью матрицы из 6 значений. |