transform
CSS свойство transform
Поддержка браузеров
 |
 |
 |
 |
 |
 |
|
|
|
|
Список альтернативных свойств для браузеров:
- Internet Explorer - "-ms-transform" (только для 2D преобразований)
- Firefox - "-moz-transform" (только для 2D преобразований)
- Opera - "-o-transform" (только для 2D преобразований)
- Safari и Chrome - "-webkit-transform" (для 2D и 3D преобразований)
Описание
Свойство transform применяет 2D или 3D преобразование к элементу. Оно позволяет вращать элементы, масштабировать, наклонять и т.д.
| Значение по умолчанию: | none |
|---|---|
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transform="rotate(7deg)" |
Значения свойства
| Значение | Описание |
|---|---|
| none | Преобразование не применяется. |
| matrix(n,n,n,n,n,n) | Применяет 2D преобразование с помощью матрицы из шести значений. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений. |
| translate(x,y) | Применяет 2D смещение. |
| translate3d(x,y,z) | Применяет 3D смещение. |
| translateX(x) | Определяет смещение, только по оси Х. |
| translateY(y) | Определяет смещение, только по оси У. |
| translateZ(z) | Определяет 3D смещение, только по оси Z. |
| scale(x,y) | Применяет 2D преобразование. |
| scale3d(x,y,z) | Применяет 3D преобразование масштаба. |
| scaleX(x) | Определяет преобразование масштаба по оси Х. |
| scaleY(y) | Определяет преобразование масштаба по оси У. |
| scaleZ(z) | Определяет 3D преобразование масштаба по оси Z. |
| rotate(angle) | Определяет 2D поворот, угол указывается в параметре. |
| rotate3d(x,y,z,angle) | Определяет 3D поворот. |
| rotateX(angle) | Определяет 3D поворот вдоль оси Х. |
| rotateY(angle) | Определяет 3D поворот вдоль оси У. |
| rotateZ(angle) | Определяет 3D поворот вдоль оси Z. |
| skew(x-angle,y-angle) | Определяет 2D преобразование вдоль осей Х и У. |
| skewX(angle) | Определяет 2D преобразование наклона вдоль оси Х. |
| skewY(angle) | Определяет 2D преобразование наклона вдоль оси У. |
| perspective(n) | Определяет перспективу для преобразования 3D элемента. |
#myDIV
{
background-color:#1aa5ca;
transform:rotate(20deg);
}
