-ms-transform-origin property
[This documentation is preliminary and is subject to change.]
Gets or sets one or two values that establish the origin of transformation for an element.
This property is read/write.
 |
Syntax
-ms-transform-origin: [ [ [
<percentage>
|
<length>
| left | center | right ] [
<percentage>
|
<length>
| top | center | bottom ] ? ]
<length>
] | [ [ [ left | center | right ] || [ top | center | bottom ] ]
<length>
]
Property values
One or two of the following origin values, separated by whitespace.
- length
-
A floating-point number, followed by either an absolute units designator (
cm,mm,in,pt, orpc) or a relative units designator (em,ex, orpx), that indicates the origin of transformation. For more information about the supported length units, see CSS Values and Units. - percentage
-
An integer, followed by a %. The value is a percentage of the total box length (for the first value) or the total box height (for the second value, if specified).
left-
First value only. Equal to 0% or a zero length.
center-
First value only. Equal to 50% or half the length of the box.
right-
First value only. Equal to 100% or the full box length.
top-
Second value only. Equal to 0% or a zero height.
center-
Second value only. Equal to 50% or a half the height of the box.
bottom-
Second value only. Equal to 100% or the full box height.
CSS information
| Applies To | block-level and inline-level elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | 50% 50% 0 |
Standards information
- CSS 3D Transforms Module Level 3, Section 3
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.
#mytransform {
-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-ms-transform-origin: 60% 100%;
}
See also
Build date: 3/13/2012
