Главная/ Cправочник HTML, CSS, Javascript/ CSS расширения/ CSS расширения для Internet Explorer/ Filters/ Фильтр Matrix | назначение, параметры фильтра, примеры

Фильтр Matrix

Последнее обновление: 22.04.2011

Фильтр Matrix изменяет размеры, вращает, отражает, искажает элемент с помощью матричных преобразований.

Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.

Синтаксис

div {
   -ms-filter:"progid:DXImageTransform.Microsoft.Matrix()";
   filter:progid:DXImageTransform.Microsoft.Matrix();

}

Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.

Параметры фильтра

Параметр Описание Возможные значения Значение по умолчанию
Dx определяет смещение контента элемента в пикселях по оси x, не изменяя сам элемент (если SizingMethod=’auto expand’, значение этого параметра игнорируется) действительное число с точкой между целой и дробной частью 1.0
Dy определяет смещение контента элемента в пикселях по оси x, не изменяя сам элемент (если SizingMethod=’auto expand’, значение этого параметра игнорируется) действительное число с точкой между целой и дробной частью 1.0
enabled флаг, управляющий фильтром
  • true — фильтр включен
  • false — фильтр отключен
 true
FilterType определяет метод используемый для отображения результата работы фильтра
  • bilinear — высококачественный билинейный метод (качество получаемой картинки выше, картинка грузится дольше, подходит для статических эффектов)
  • nearest neighbor — использовать метод вывода, как у ближайшего соседа (качество получаемой картинки ниже, картинка грузится быстрее, подходит для анимации)
 bilinear
M11 определяет элемент трансформационной матрицы, находящийся в первой строке и в первом столбце матрицы действительное число с точкой между целой и дробной частью 1.0
M12 определяет элемент трансформационной матрицы, находящийся в первой строке и во втором столбце матрицы действительное число с точкой между целой и дробной частью 0.0
M21 определяет элемент трансформационной матрицы, находящийся во второй строке и в первом столбце матрицы действительное число с точкой между целой и дробной частью 0.0
M22 определяет элемент трансформационной матрицы, находящийся во второй строке и во втором столбце матрицы действительное число с точкой между целой и дробной частью 1.0
SizingMethod определяет, будет ли элемент изменять свои начальные размеры, чтобы вместить в себя результаты работы фильтра
  • clip to original — элемент не меняет своих размеров
  • auto expand — элемент меняет свои размеры. чтобы вместить результаты работы фильтра
 clip to original

Примеры

Элемент не изменяющий свои размеры в результате работы фильтра, контент смещен по оси x на 10px влево и по оси y на 70px вниз (контент, выходящий за пределы элемента в результате работы фильтра, обрезается). 

div {
   -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(Dx=10, Dy=70)";
   filter:progid:DXImageTransform.Microsoft.Matrix(Dx=10, Dy=70);
}

Элемент изменяющий свои размеры в результате работы фильтра, повернут на 45 градусов.

div {
   -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.7071068, M12=-0.7071068, M21=0.7071068, M22=0.7071068, SizingMethod='auto expand', enabled=false)";
   filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071068, M12=-0.7071068, M21=0.7071068, M22=0.7071068, SizingMethod='auto expand', enabled=false);
}

В примере для задания элементов матрицы дробная часть числа содержит 7 знаков, но может содержать и больше.

По теме

Теги: ,
Показать комментарии