# Matrix Filter

This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9.

Resizes, rotates, or reverses the content of the object using matrix transformation.

**Syntax**

HTML <ELEMENT`STYLE=`

... >

"filter:progid:DXImageTransform.Microsoft.Matrix(sProperties)"Internet Explorer 5.5 or later Scripting object`.style.filter =`

"progid:DXImageTransform.Microsoft.Matrix(sProperties)"Internet Explorer 5.5 or later

**Possible Values**

sProperties String that specifies one or more properties exposed by the filter.

**Members Table**

The following table lists the members exposed by the

Matrixobject.Attributes/Properties

Attribute Property Description Dx Dx Sets or retrieves the

`X`

component of the augmenting vector for linear transformations.Dy Dy Sets or retrieves the

`Y`

component of the augmenting vector for linear transformations.enabled Enabled Sets or retrieves a value that indicates whether the filter is enabled.

FilterType FilterType Sets or retrieves the method used to define pixels of new content.

M11 M11 Sets or retrieves the first row/first column matrix entry for linear transformations.

M12 M12 Sets or retrieves the first row/second column matrix entry for linear transformations.

M21 M21 Sets or retrieves the second row/first column matrix entry for linear transformations.

M22 M22 Sets or retrieves the second row/second column matrix entry for linear transformations.

SizingMethod SizingMethod Sets or retrieves a value that indicates whether the container is resized to fit the resulting image.

**Remarks**

Use the

Matrixfilter to create the following simple effects.

- Flip horizontal. Negate the M11 and M12 entry values.
- Flip vertical. Negate the M21 and M22 entry values.
- Resize. Multiply each matrix entry by the same factor. The content size changes in proportion to the multiple used. See the following examples.
- Rotate. Adjust the default matrix entries by the appropriate trigonometry function. See the following examples.
These effects are possible through the use of linear transforms. The

Matrixfilter creates a linear transformation of the displayed content with a`2x2`

matrix augmented by a linear vector. Maximizing the effects available with the linear transform matrix requires a thorough understanding of linear algebra. However, for the simple functions described previously, no linear algebra is required.The final image produced by the

Matrixfilter is an interpolation of the previous content. Using the padding property minimizes the chance of clipping at the edge of the final image.The object that the filter is applied to must have layout before the filter effect displays. You can give the object

layoutby setting the height or width property, setting the position property to`absolute`

, setting the writingMode property to`tb-rl`

, or setting the contentEditable property to`true`

.You can assign multiple filters or transitions to an object by declaring each in the filter property of the object. The following div declaration assigns two filters and a

`Wheel`

transition to adivelement.When multiple filters are applied to an object, each filter is process in source order, with the exception of procedural surfaces, which are computed first. To emphasize a filter's effect, place it last in source order or on the object's parent. Always place transitions last in source order.<DIV STYLE="width:100%; filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3);"> Blurry text with smudge of gray.</div>NoteAs of Internet Explorer 9, the visual effect of this filter is only applied when content is displayed on a screen; the effect is not applied when content is printed.

**Examples**

You can script a resizing function for the

Matrixfilter by multiplying each matrix entry by a common multiple. The resulting filter increases or decreases the size of the oObj input object and its content by the value of`flMultiplier`

.<SCRIPT> <!-- fnResize function --> //oObj input requires an matrix filter applied. //flMultiplier input defines the amount by which the oObj is resized. function fnResize(oObj,flMultiplier) { oObj.filters.item(0).M11 *= flMultiplier; oObj.filters.item(0).M12 *= flMultiplier; oObj.filters.item(0).M21 *= flMultiplier; oObj.filters.item(0).M22 *= flMultiplier; } </SCRIPT>You can script a more complex rotating function by applying trigonometry functions to the entries of the

Matrixfilter. Given an object with aMatrixfilter applied, the object is rotated by the angle entered.<SCRIPT> var deg2radians = Math.PI * 2 / 360; <!-- fnSetRotation function --> //oObj input requires an matrix filter applied. //deg input defines the requested angle of rotation. { rad = deg * deg2radians ; costheta = Math.cos(rad); sintheta = Math.sin(rad); oObj.filters.item(0).M11 = costheta; oObj.filters.item(0).M12 = -sintheta; oObj.filters.item(0).M21 = sintheta; oObj.filters.item(0).M22 = costheta; } </SCRIPT>You can combine the two previous functions and create a simple animation. The animation is driven by the onfilterchange event. The following example spins and expands the text of a

divobject. You can animate other style-related properties in this manner.<SCRIPT><!-- fnSetRotation function --> //oObj input requires that a matrix filter be applied. //deg input defines the requested angle of rotation. var deg2radians = Math.PI * 2 / 360; function fnSetRotation(oObj, deg) { rad = deg * deg2radians ; costheta = Math.cos(rad); sintheta = Math.sin(rad); oObj.filters.item(0).M11 = costheta; oObj.filters.item(0).M12 = -sintheta; oObj.filters.item(0).M21 = sintheta; oObj.filters.item(0).M22 = costheta; } <!-- fnResize function --> //oObj input requires that a matrix filter be applied. //flMultiplier input defines the amount by which the oObj is resized. function fnResize(oObj, flMultiplier) { oObj.filters.item(0).M11 *= flMultiplier; oObj.filters.item(0).M12 *= flMultiplier; oObj.filters.item(0).M21 *= flMultiplier; oObj.filters.item(0).M22 *= flMultiplier; } var iCount = 400; <!-- fnSpin function --> function fnSpin(oObj) { <!-- The function chosen for flMultiple defines size changes in the animation. --> var flMultiple = iCount/720; iCount += 4; <!-- The number of 360-degree rotations is three. --> if (iCount>=360*3) { oObj.onfilterchange = null; } fnSetRotation(oObj, iCount); fnResize(oObj, flMultiple); } </SCRIPT> <!-- When loaded, the onfilterchange event is fired as the filter makes its initial settings. This starts the animation.--> <DIV ID="oDiv" STYLE="position:absolute; filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')" onfilterchange="fnSpin(this)" > <DIV STYLE=" background-color: lightblue; padding:5;"> SOME TEXT<BR/> SOME TEXT<BR/> SOME TEXT<BR/> SOME TEXT<BR/> </DIV> </DIV>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm

**Applies To**

A, ABBR, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, hn, IFRAME, FRAMESET, I, INS, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TH, TD, TT, U, UL, VAR, XMP

**See Also**