2 out of 7 rated this helpful - Rate this topic

-ms-transform property

[This documentation is preliminary and is subject to change.]

Gets or sets a list of one or more transform functions that specify how to translate, rotate, or scale an element in 2-D or 3-D space.

This property is read/write.

CSS 3D Transforms Module Level 3, Section 2

Syntax

-ms-transform: none | <transform-function> [ <transform-function> ] *

Property values

transform-function: One or more transformation functions (listed in Remarks), separated by whitespace, applied in the order specified.
none: Keyword that indicates no transformation function is applied.

CSS information

Applies To	block-level and inline-level elements
Media	visual
Inherited	no
Initial Value	none

Standards information

CSS 3D Transforms Module Level 3, Section 2

Remarks

The following transformation functions are supported for use with the -ms-transform property:

The matrix(a,b,c,d,e,f) function specifies a 2-D transformation in the form of a transformation matrix of six values (a through f).
The translate(tx,ty) function specifies a 2-D translation by the vector [tx,ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not specified, its value is zero. (Translation-value parameters can be either percentages or lengths.)
The translateX(tx) function specifies a translation by the given amount in the x direction.
The translateY(ty) function specifies a translation by the given amount in the y direction.
The scale(sx,sy) function specifies a 2-D scale operation by the [sx,sy] scaling vector that is described by the two parameters. If the second parameter is not provided, it takes a value equal to the first.
The scaleX(sx) function specifies a scale operation by using the [sx,1] scaling vector, where sx is given as the parameter.
The scaleY(sy) function specifies a scale operation by using the [1,sy] scaling vector, where sy is given as the parameter.
The rotate(angle) function specifies a 2-D rotation by the angle specified in the parameter about the origin of the element, as defined by the -ms-transform-origin property.
The skewX(ax) function specifies a skew transformation along the x-axis by the given angle.
The skewY(ay) function specifies a skew transformation along the y-axis by the given angle.
The skew(ax,ay) function specifies a skew transformation along the x and y axes. The first angle parameter specifies the skew on the x-axis. The second angle parameter specifies the skew on the y-axis. If the second parameter is not given, a value of zero is used for the y angle (that is, no skew on the y-axis).

Examples

The following example is an ID selector that demonstrates the use of both the -ms-transform and the -ms-transform-origin properties. In this case, the -ms-transform-origin property has been set to 60% 100%, which sets the transform's origin point to 60% of the length and 100% of the height of the element to be transformed. The -ms-transform property first uses the translate function to move the element 200 pixels in the x direction and 100 pixels in the y direction. It then uses the scale function to scale the element by 75%. Finally, it uses the rotate function to rotate the element 40 degrees clockwise around the origin point set by the -ms-transform-origin property.

Copy


#mytransform {
    -ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
    -ms-transform-origin: 60% 100%;
}