Список альтернативных свойств для браузеров:
- 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 элемента. |
Пример
|