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);
}
