CSS фильтр Matrix. Трансформация объектов в IE
С помощью IE фильтра Matrix можно изменять размер, поворачивать, или отражать объект на основе матричных преобразований.
Internet Explorer 9 не добавляет фильтры к элементам при печати документа.
Краткая информация по по свойству Matrix
Значение по умолчанию | Нет |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства filter Matrix
filter: progid:DXImageTransform.Microsoft.Matrix(параметры)
Здесь:
enabled - включает или выключает фильтр. Значение true
разрешает, а false
запрещает использование фильтра.
Dx - устанавливает компонент X расширенной матрицы для линейного преобразования.
Dy - устанавливает компонент Y расширенной матрицы для линейного преобразования.
FilterType - задает метод интерполяции пикселов. bilinear
— билинейный метод (используется по умолчанию), дает более сглаженные края и переходы; nearest neighbor
— метод по ближайшим точкам, результат менее сглаженный, но работает быстрее.
M11 - значение матрицы преобразования, располагается в первой строке первой колонки.
M12 - значение матрицы преобразования, находится в первой строке второй колонки.
M21 - значение матрицы преобразования, располагается во второй строке первой колонки.
M22 - значение матрицы преобразования, располагается во второй строке второй колонки.
SizingMethod - определяет, как должен масштабироваться контейнер вокруг конечного изображения. clip to original
— размер не изменяется (значение по умолчанию); auto expand
— контейнер изменяется согласно конечному изображению.
Сама матрица для наглядности представлена на рисунке ниже:
Ниже в таблице приведены некоторые распространенные преобразования с помощью этой матрицы
Преобразование и значения параметров |
Описание |
M11 = 2 |
Изменение размера по горизонтали. Значением является масштаб элемента. |
M12 = 1 |
Скос по вертикали. |
M21 = 1 |
Скос по горизонтали. |
M22 = 2 |
Изменение размера по вертикали. Значением является масштаб элемента. |
Dx = 20 |
Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное - влево. |
Dy = 20 |
Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз (вверх при отрицательном значении). |
M11=-1, SizingMethod='auto expand' |
Отражение по горизонтали. |
M22 = -1, SizingMethod = 'auto expand' |
Отражение по вертикали. |
Объектная модель
Объект.style.filter =
progid:DXImageTransform.Microsoft.Matrix(
M11='<число>',
M12='<число>',
M21='<число>',
M22='<число>',
Dx='<число>',
Dy='<число>'
)
Пример применения filter в IE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>filter Matrix</title>
<style>
.matrix {
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M22=-1,
SizingMethod='auto expand');
}
</style>
</head>
<body>
<p><img src="butterfly.png" alt="Бабочка">
<img src="butterfly.png" alt="Бабочка" class="matrix"></p>
</body>
</html>