Свойство transform
Пример style.transform
Поворот элемента div:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
Попробуйте сами »
Описание transform
Свойство transform применяет 2D или 3D преобразование к элементу. Это свойство позволяет вращать, масштабировать, перемещать, наклонять и т. д. элементы.
Поддержка transform
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данное свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Синтаксис transform
Вернуть свойство transform:
object.style.transform
Установите свойство transform:
object.style.transform = "none|transform-functions|initial|inherit"
Значение свойства transform
| Значение | Описание |
|---|---|
| none | Определяет, что не должно быть преобразований |
| matrix(n, n, n, n, n, n) | Определяет 2D-преобразование, используя матрицу из шести значений |
| matrix3d(n, n, n, n, и т. д....) | Определяет 3D-преобразование, используя матрицу 4x4 из 16 значений |
| translate(x, y) | Определяет 2D-перемещение |
| translate3d(x, y, z) | Определяет 3D-перемещение |
| translateX(x) | Определяет перемещение, используя только значение для оси X |
| translateY(y) | Определяет перемещение, используя только значение для оси Y |
| translateZ(z) | Определяет 3D-перемещение, используя только значение для оси Z |
| scale(x, y) | Определяет преобразование масштаба 2D |
| scale3d(x, y, z) | Определяет 3D-масштаб преобразование |
| scaleX(x) | Определяет преобразование масштаба, задавая значение для оси X |
| scaleY(y) | Определяет масштабное преобразование, задавая значение для оси Y |
| scaleZ(z) | Определяет масштабное трехмерное преобразование, задавая значение для оси Z |
| rotate(angle) | Определяет двухмерное вращение, угол указывается в параметре |
| rotate3d(x, y, z, angle) | Определяет трехмерное вращение |
| rotateX(angle) | Определяет трехмерное вращение по X-ось |
| rotateY(угол) | Определяет 3D-вращение по оси Y |
| rotateZ(угол) | Определяет 3D-вращение по оси Z |
| skew(угол x, угол y) | Определяет 2D-преобразование наклона по осям X и Y |
| skewX(угол) | Определяет 2D-преобразование наклона по X-ось |
| skewY(angle) | Определяет двумерное преобразование наклона вдоль оси Y |
| perspective(n) | Определяет перспективный вид для трехмерного преобразованного элемента |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали transform
| Значение по умолчанию: | none |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство преобразования элемента. |
| CSS Версия | CSS3 |
Связанные страницы transform
CSS Справочник: Свойство transform