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