Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

transform-origin property

Gets or sets one or two values that establish the origin of transformation for an element.

This property is read/write.

CSS Transforms Module, Level 3, Section 8Internet Explorer 9

 

Syntax

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 a supported length unit, that indicates the origin of transformation.

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 Toblock-level and inline-level elements
Mediavisual
Inheritedno
Initial Value50% 50% 0

Standards information

Remarks

The version of this property using a vendor prefix, -ms-transform-origin, has been deprecated in Internet Explorer 10 and later. However, be aware that -ms-transform-origin is the only form of this property that is recognized by Windows Internet Explorer 9, which supports 2-D Cascading Style Sheets (CSS) transforms. To ensure maximum compatibility, specify a cascade such as the following, where the prefixed versions of the property come before the unprefixed version.


#mytransform {
  ...
  -ms-transform-origin: 60% 100%;
  -webkit-transform-origin: 60% 100%;
  -moz-transform-origin: 60% 100%;
  transform-origin: 60% 100%;
}

If the transform-origin property is not set, the transform begins in the center (equal to a transform-origin value of "50% 50%").

If only one value is specified, the second value is assumed to be center.

3-D transforms are only supported in Internet Explorer 10 and later.

To learn more about CSS transforms in Windows Internet Explorer, see How to bring your webpage to life with CSS transforms, transitions, and animations.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-transform-origin" as an alias for this property.

Examples

The following example is an ID selector that demonstrates the use of both the transform and the transform-origin properties. In this case, the 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 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 transform-origin property.


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

See also

CSSStyleDeclaration
currentStyle
style
transform
How to bring your webpage to life with CSS transforms, transitions, and animations

 

 

Show:
© 2014 Microsoft