Export (0) Print
Expand All
top
Expand Minimize
This topic has not yet been rated - Rate this topic

transformOrigin 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

HRESULT put_transformOrigin(
  [in]           BSTR v
);

HRESULT get_transformOrigin(
  [out, retval]  BSTR *sOrigin
);

Property values

Type: BSTR

One or two of the following origin values, separated by whitespace.

position (position)

A floating-point number, followed by a supported length unit, that indicates the origin of transformation.

percentage (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 (left)

First value only. Equal to 0% or a zero length.

center (center)

First value only. Equal to 50% or half the length of the box.

right (right)

First value only. Equal to 100% or the full box length.

top (top)

Second value only. Equal to 0% or a zero height.

center (center)

Second value only. Equal to 50% or a half the height of the box.

bottom (bottom)

Second value only. Equal to 100% or the full box height.

String format

[ [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]

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, IHTMLCSSStyleDeclaration::transformOrigin, has been deprecated in Internet Explorer 10 and later. However, be aware that IHTMLCSSStyleDeclaration::transformOrigin 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 IHTMLCSSStyleDeclaration::transformOrigin property is not set, the transform begins in the center (equal to a IHTMLCSSStyleDeclaration::transformOrigin 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.

Requirements

Minimum supported client

Windows Vista with SP1, Windows 7 [desktop apps only]

Minimum supported server

Windows Server 2008 R2 [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

See also

IHTMLCSSStyleDeclaration::transform
How to bring your webpage to life with CSS transforms, transitions, and animations

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.