Свойство -moz-transform / свойство -webkit-transform

Преобразования в CSS - это не только визуальные эффекты, но и точный контроль над элементами. Свойства -moz-transform и -webkit-transform позволяют выполнять 2D-трансформации прямо в коде.

Разберётесь, какие функции трансформаций поддерживаются разными браузерами и как это учитывать на практике. Вы увидите примеры применения эффектов, которые сохраняют одинаковый вид интерфейса.

Обновлено: 2023-09-17 18:19:55 Вадим Дворниковавтор материала

Поддержка браузерами:

• moz-transform: Firefox;
• webkit-transform: Safari, Google Chrome.

Эти свойства задают двумерное линейное преобразование, применяемое к элементу. Исходное положение преобразования определяется свойством -moz-transform-origin.

С помощью линейных преобразований можно вращать, масштабировать, наклонять, сдвигать элементы в произвольном порядке:

Свойства -moz-transform и webkit transform предоставляют ряд функций для наиболее распространенных операций (rotate , scale , skew и translate ) и функцию для определения общей трансформации (matrix ).

Все эти функции могут быть использованы в любом порядке. Обратите внимание, что любая комбинация двумерных линейных преобразований может быть задана с помощью одного вызова matrix. Если нужно применить к элементу простую операцию (например, только один оборот или смещение), то стоит использовать соответствующий метод. Но если нужна сложная операция, лучше использовать метод matrix для более быстрого отображения. В Internet Explorer фильтр matrix обеспечивает аналогичный функционал.

Эти функции преобразования аналогичны преобразованиям, поддерживаемым SVG и VML.

Возможные значения:

• matrix(a, b, c, d, transX, transY)
• rotate(угол)
• scale(x[, y])
• scaleX(x)
• scaleY(y)
• skew(уголX[, уголY])
• skewX(angleX)
• skewY(angleY)
• translate(x[, y])
• translateX(x)
• translateY(y)

Описание значений:

По умолчанию: none

Функции преобразования

Matrix

matrix(a, b, c, d, transX, transY)

Выполняет для элемента указанное линейное преобразование. Каждая точка элемента представлена вектором (х, у, 1 ), где х и y являются координатами точки в локальной системе координат, указанной в свойстве -moz-transform-origin. Результатом метода matrix является следующая операция умножения величин:

Это означает, что каждая точка (х , у ) переходит в точку (a * x + c * y + transX, b * x + d * y + transY).

Например:

matrix(1, 0, 0, 1, 0px, 0px) идентично преобразованию (каждая точка остается неподвижной):

(x, y) --> (1 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (x, y)

matrix(2, 0, 0, 1, 0px, 0px) является горизонтальным увеличением размеров в два раза по отношению к исходным размерам:

(x, y) --> (2 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (2 * x, y)

matrix(2, 0, 0, 1, 0px, 0px) является вертикальным увеличением размеров в два раза по отношению к исходным размерам:

(x, y) --> (1 * x + 0 * y + 0, 0 * x + 2 * y + 0) = (x, 2 * y)

webkit transform matrix (3, 0, 0, 3, 0px, 0px) является увеличением размеров в три раза по отношению к исходным размерам:

(x, y) --> (3 * x + 0 * y + 0, 0 * x + 3 * y + 0) = (3 * x, 3 * y)

matrix(-1, 0, 0, 1, 0px, 0px) является горизонтальным отражением по отношению к оси у:

(x, y) --> (-1 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (-x, y)

matrix(1, 0, 0, -1, 0px, 0px) является вертикальным отражением по отношению к оси x:

(x, у) -> (1 * х + 0 * у + 0, 0 * х + -1 * у + 0) = (х, у)

matrix(-1, 0, 0, -1, 0px, 0px) является отражением по отношению к исходному положению:

(x, у) -> (-1 * х + 0 * у + 0, 0 * х + -1 * у + 0) = (-x, -y)

matrix(-2, 0, 0, 1, 0px, 0px) является отражением по отношению к исходному положению с горизонтальным уменьшением размеров в два раза:

(x, у) -> (-2 * х + 0 * у + 0, 0 * х + 1 * у + 0) = (-2 * х, у)

matrix(1, 0, 1, 1, 0px, 0px) является горизонтальным наклоном против часовой стрелки на 45 градусов.

(x, у) -> (1 * х + 1 * у + 0, 0 * х + 1 * у + 0) = (х + у, у)

Перемещение каждой точки элемента по горизонтали вдоль оси y.

matrix(1, 0, -1, 1, 0px, 0px) является наклоном по часовой стрелке по горизонтали на 45 градусов.

(x, у) -> (1 * х - 1 * у + 0, 0 * х + 1 * у + 0) = (х - у, у)

Перемещение каждой точки элемента по горизонтали в направлении обратном направлению оси у.

webkit transform matrix (1, 1, 0, 1, 0px, 0px) является наклоном по часовой стрелке по вертикали на 45 градусов.

(x, у) -> (1 * х + 0 * у + 0, 1 * х + 1 * у + 0) = (х, у + х)

Перемещение каждой точки элемента по вертикали вдоль оси х.

matrix(1, -1, 0, 1, 0px, 0px) является наклоном против часовой стрелки по вертикали на 45 градусов.

(x, у) -> (1 * х + 0 * у + 0, -1 * х + 1 * у + 0) = (х, у - х)

Перемещение каждой точки элемента по вертикали в направлении обратном направлению оси х.

matrix(1, 0, 0, 1, 5px, 0px) является горизонтальным смещением на 5 пикселей:

(x, у) -> (1 * х + 0 * у + 5px, 0 * х + 2 * у + 0) = (х + 5px, у)

matrix(1, 0, 0, 1, 0px, -10px) является вертикальным смещением на -10 пикселей:

(x, у) -> (1 * х + 0 * у + 5px, 0 * х + 2 * у + 0) = (х, у - 10px)

Основным преимуществом функции matrix является то, что каждое двухмерное линейное преобразование можно описать с помощью одной функции.

Преобразование основывается на умножении функций (и их умноженных свойств):

Свойство moz-transform-origin указывает исходное положение относительно элемента. А оси х и у всегда параллельны горизонтальной и вертикальной сторонам элемента, поэтому преобразования изменяют локальную систему координат. Из-за этого matrix преобразования необходимо умножать справа налево, а не слева направо.

Это значит, что:

matrix(a1, b1, c1, d1, transX1, transY1) matrix(a2, b2, c2, d2, transX2, transY2) =
matrix(a2*a1 + b2*c1, a2*b1 + b2*d1, c2*a1 + d2*c1, c2*b1 + d2*d1, transX2*a1 + transY2*c1 + transX1, transX2*b1 + transY2*d1 + transY1)

Например, если нужно выполнить горизонтальное отражение по оси y с последующим горизонтальным смещением на 5 пикселей:

• matrix(-1, 0, 0, 1, 0px, 0px) matrix(1, 0, 0, 1, 5px, 0px);
• webkit transform matrix(-1, 0, 0, 1, -5px, 0px).

Если нужно выполнить эти операции в обратном порядке. Например, горизонтальное смещение на 5 пикселей с последующим горизонтальным отражением по оси у:

• matrix(1, 0, 0, 1, 5px, 0px) matrix(-1, 0, 0, 1, 0px, 0px);
• matrix(-1, 0, 0, 1, 5px, 0px).

Если нужно выполнить более двух преобразований, умножьте первые две функции справа налево и замените их полученным в результате умножения значением. На этом шаге вы сократили количество преобразований на одно. Выполните те же действия, пока не останется только одна matrix, это и будет окончательная функция.

Rotate

webkit transform rotate (angle)

Поворачивает элемент по часовой стрелке вокруг точки отсчета координат на заданный угол. Эквивалентно преобразованию matrix(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0).

Чтобы получить дополнительную информацию, посмотрите пример 2.

Scale

Поддерживаются три функции масштабирования:

1. 1. scale(x[, y])

Изменяет размеры элемента по отношению к исходным в соответствии со значениями х и у. Если у не задано, то по горизонтали и вертикали размеры изменяются на коэффициент х.

Эквивалентно преобразованию matrix(x, 0, 0, y, 0, 0).

2. scaleX(x)

Изменяет размеры элемента по отношению к исходным вдоль горизонтальной оси в соответствии со значением х.

Эквивалентно преобразованию matrix(х, 0, 0, 1, 0, 0).

3. scaleY(у)

Изменяет размеры элемента по отношению к исходным вдоль вертикальной оси в соответствии со значением у.

Эквивалентно преобразованию matrix(1, 0, 0, у, 0, 0).

Чтобы получить дополнительную информацию о webkit transform scale, посмотрите пример 3.

Skew

Поддерживаются три функции скоса:

1. skew(angleX[, angleY])

Наклоняет элемент против часовой стрелки по горизонтали и по часовой стрелке по вертикали в соответствии с заданными углами.
Эквивалентно преобразованию matrix(1, tan(угол Y), tan(угол X), 1, 0, 0).

2. skewX(угол X)

Наклоняет элемент против часовой стрелки по горизонтали на угол X. Эквивалентно преобразованию matrix(1, 0, tan(угол X), 1, 0, 0).

3. skewY(уголY)

Наклоняет элемент по часовой стрелке по вертикали на угол Y. Эквивалентно преобразованию matrix(1, tan(уголY), 0, 1, 0, 0).

Чтобы получить дополнительную информацию о webkit transform, посмотрите пример 4.

Translate

Поддерживаются три функции смещения:

1. translate(x[, y])

Смещает элемент по горизонтали и по вертикали в соответствии со значениями х и у. Значения х и y должны быть указаны в единицах длины. Значение y по умолчанию равно нулю (без вертикального смещения).

Эквивалентно преобразованию matrix(1, 0, 0, 1, х, у).

2. translateX(х)

Смещает элемент по горизонтали в соответствии со значением х. Значение х должно быть указано в единицах длины.

Эквивалентно преобразованию matrix(1, 0, 0, 1, х, 0).

3. translateY(у)

Смещает элемент по вертикали в соответствии со значением y. Значение y должно быть указано в единицах длины.

Эквивалентно преобразованию matrix (1, 0, 0, 1, 0, у).

Чтобы получить дополнительную информацию по webkit transform translate, посмотрите пример 1.

Пример HTML-кода 1:

Этот пример иллюстрирует использование свойств -moz-transform, -webkit-transform и метода translate:

<head>
    <style>
        .notrans {
             width: 300px;
             border:4px solid #ff0000;
        }

        .trans {
             width: 300px;
             border:4px solid #ff0000;

            -moz-transform: translate(100px, 0px);
            -webkit-transform: translate(100px, 0px);
        }
    </style>
</head>
<body>
    <div class="notrans">An element without translation</div>
    <br /><br />
    <div class="trans">An element translated horizontally by 100px</div>
</body>

Пример HTML-кода 2:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform и метода rotate:

<head>
    <style>
        .rotated {
             width: 300px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */

            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated">An element rotated by 45 degrees</div>
</body>

Пример HTML-кода 3:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform scale:

<head>
    <style>
        .noscaled {
             width: 300px;
             height: 30px;
             border:4px solid #ff0000;
        }

        .scaled {
             width: 300px;
             height: 30px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     
            -webkit-transform-origin: 0px 0px;

            -moz-transform: scale(2, 3);
            -webkit-transform: scale(2, 3);
        }
    </style>
</head>
<body>
    <div class="noscaled">A 300x30 element without scaling</div>
    <br /><br />
    <div class="scaled">A 300*30 scaled element</div>
</body>

Пример HTML-кода 4:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform и метода skew:

<head>
    <style>
        .base {
             width: 300px;
             height: 80px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */
        }

        .skewH {
            -moz-transform: skewX(20deg);
            -webkit-transform: skewX(20deg);
        }
        .skewV {
            -moz-transform: skewY(20deg);
            -webkit-transform: skewY(20deg);
        }
        .skewHV {
            -moz-transform: skew(20deg, 20deg);
            -webkit-transform: skew(20deg, 20deg);
        }
    </style>
</head>
<body>
    <div class="base skewH">Horizontal skew</div>
    <br /><br />
    <div class="base skewHV">Horizontal and vertical skew</div>
    <br /><br />
    <div class="base skewV">Vertical skew</div>
</body>

Пример HTML-кода 5:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform matrix:

<head>
    <style>
        .base {
             width: 300px;
             height: 80px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */
        }

        .rotate_translate {
            -moz-transform: rotate(30deg) translateX(200px);
            -webkit-transform: rotate(30deg) translateX(200px);
        }
        .rotateMatrix_translateMatrix {
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0px, 0px) matrix(1, 0, 0, 1, 200px, 0px);
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0) matrix(1, 0, 0, 1, 200, 0);
        }
        .rotate_translateMatrix {
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 160px, 100px);
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 160, 100);
        }
    </style>
</head>
<body>
    <div class="base rotate_translate">Skew and rotate</div>
    <br /><br />
    <div class="base rotateMatrix_translateMatrix">Skew matrix and rotation matrix</div>
    <br /><br />
    <div class="base rotate_translateMatrix">Skew and rotation matrix</div>
</body>

Пример HTML-кода 6:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform и свойств filter:

<head>
    <style>
        .rotate_scale {
             width: 300px;
             height: 300px;
             background-color:red;

             filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.433, M12=-0.25, M21=0.25, M22=0.433, Dx=100, Dy=50);
            -moz-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
            -webkit-transform: matrix(0.433, 0.25, -0.25, 0.433, 0, 0);
        }
    </style>
</head>
<body>
    <div class="rotate_scale"></div>
</body>

Вадим Дворниковавтор-переводчик статьи «-moz-transform property -webkit-transform property»