Export (0) Print
Expand All
top
Expand Minimize

transform property

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 Transforms Module, Level 3, Section 6Internet Explorer 9

Syntax

HRESULT put_transform(
  [in]           BSTR v
);

HRESULT get_transform(
  [out, retval]  BSTR *sTransforms
);

Property values

Type: BSTR

One or more transformation functions, separated by whitespace, applied in the order specified.

String format

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

CSS information

Applies Toblock-level and inline-level elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

The version of this property using a vendor prefix, IHTMLCSSStyleDeclaration::transform, has been deprecated in Internet Explorer 10 and later. However, be aware that IHTMLCSSStyleDeclaration::transform 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: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  -webkit-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  -moz-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
}

For information about the transformation functions that are supported for use with the IHTMLCSSStyleDeclaration::transform property, see Transform Functions.

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

Examples

The following example is an ID selector that demonstrates the use of both the IHTMLCSSStyleDeclaration::transform and the IHTMLCSSStyleDeclaration::transformOrigin properties. In this case, the IHTMLCSSStyleDeclaration::transformOrigin 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 IHTMLCSSStyleDeclaration::transform property first uses the translate function to move the element 50 pixels in the x direction and 10 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 45 degrees clockwise around the origin point set by the IHTMLCSSStyleDeclaration::transformOrigin property.



div {
   width: 100px;
   height: 100px;
   background-color: #D3D3D3;
   border: solid 2px; #000;
}
#mytransform {
  transform: translate(50px, 10px) scale(.75, .75) rotate(45deg);
  transform-origin: 60% 100%;
}

In image below, you can see the original element and the element after the IHTMLCSSStyleDeclaration::transform property has been used.

An original element and an element with the transform property applied

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::transformOrigin
How to bring your webpage to life with CSS transforms, transitions, and animations

 

 

Community Additions

ADD
Show:
© 2014 Microsoft